您的位置：首页 > Web前端 > JQuery

JQuery之复选框checkbox基本操作

2016-07-25 21:49 435 查看

利用JQuery实现复选框的基本操作，例如全选、全部选、获取选中值、获取未选中值、获取选中长度等操作。

下面直接看例子，例子中有详细的介绍了JQuery是如何实现这些功能的。

在使用JQuery之前要先导入JQuery的相关文件，我这里引入的是jquery-1.8.0.min.js

<html>
<head>
<meta charset="UTF-8">
<title>js中字符串处理</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function() {

});

function checkBoxFuc(){
var str="";
$('input:checkbox').each(function() {
if ("checked"==$(this).attr('checked')) {
str=str+$(this).val()+",";
}
});
str="<h1>"+str+"</h1>";
$("#checkBoxId").html(str);
};

function checkBoxEdFuc(){
var str="";
$('input:checkbox').each( function(){
var self=$(this);
if(!self.prop('checked')){
str=str+self.val()+",";
}
});
str="<h1>"+str+"</h1>";
$("#checkBoxEdId").html(str);
};

function allCheckBoxEdFuc(){
$('input:checkbox').each(function(){
var self=$(this);
if(!self.prop('checked')){
self.prop('checked',true);
}
});
};

function notAllCheckBoxEdFuc(){
$('input:checkbox').each(function(){
var self=$(this);
if(self.prop('checked')){
self.prop('checked',false);
}
});
};

function numberFuc(){
var length="<h1>选中的个数为："+$('input:checkbox:checked').length+"</h1>";
$("#numberId").html(length);
};

function noNumberFuc(){
var allLength=+$('input:checkbox').length;
var checkedLength=$('input:checkbox:checked').length;
var length=allLength-checkedLength;
$("#noNumberId").html("<h1>未选中个数为："+length+"</h1>");
}
function allNumberFuc(){
var length="<h1>总个数为："+$('input:checkbox').length+"</h1>";
$("#allNumberId").html(length);
};

function firstLastFuc(){
$('input:checkbox:first').attr("checked",'true');
$('input:checkbox:last').attr("checked",'true');
};

function checkNumber(){
var number=$("#checkId").val();
//$('input:checkbox').eq(number-1).attr("checked",'true');
$('input:checkbox').eq(number-1).prop("checked",true);
}
</script>

<body>
<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3">3
<input type="checkbox" value="4">4
<input type="checkbox" value="5">5
<input type="checkbox" value="6">6
<input type="checkbox" value="7">7
<input type="checkbox" value="8">8</br>
<input type="button" value="选中的值有：" onclick="checkBoxFuc();"><p id="checkBoxId"></p>
<input type="button" value="未选中的值有：" onclick="checkBoxEdFuc();"><p id="checkBoxEdId"></p>
<input type="button" value="全选：" onclick="allCheckBoxEdFuc();"><p id="allCheckBoxEdId"></p>
<input type="button" value="全不选：" onclick="notAllCheckBoxEdFuc();"><p id="notAllCheckBoxEdId"></p>
<input type="button" value="选中的个数：" onclick="numberFuc();"><p id="numberId"></p>
<input type="button" value="未选中的个数：" onclick="noNumberFuc();"><p id="noNumberId"></p>
<input type="button" value="总个数：" onclick="allNumberFuc();"><p id="allNumberId"></p>
<input type="button" value="选中第一个和最后一个：" onclick="firstLastFuc();"><p id="firstLastId"></p>
<input id="checkId" type="text"/><input type="button" value="选中需要选中的号数" onclick="checkNumber();">
</body>
</html>

运行截图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航