对jquery操作复选框
摘要：jquery操作复选框。使用更简洁易懂，思路清晰，逻辑更明了，很实用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面-->
</head>
<body>
<!--给按钮加个点击事件-->
<input type="button" value="测试" onclick="test()" />
</body>
<script type="text/javascript">
<!--JS方式加事件-->
function test()
{
alert("aa");
}
</script>
</html>
点测试结果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面-->
</head>
<body>
<!--给按钮加个点击事件-->
<input type="button" value="测试" onclick="test()" />
<!--给下面的按钮加事件用jquery-->
<input type="button" value="测试2" id="btn" />
</body>
<script type="text/javascript">
function test()
{
alert("aa");
}
// 只有触发的时候执行
$(document).ready(function(e) {
//先找元素用$(测试2id)-用click给前面的按钮加点击事件-执行(function(){}匿名函数因为没有名字
$("#btn").click(function(){
alert("第二个按钮");//点击之后要执行的函数。匿名函数
})
});
</script>
</html>
Jquery把复选框所选中的值取出来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<input type="checkbox" class="ck" value="张店" />张店
<input type="checkbox" class="ck" value="淄川" />淄川
<input type="checkbox" class="ck" value="周村" />周村
<input type="checkbox" class="ck" value="临淄" />临淄
<input type="checkbox" class="ck" value="博山" />博山
<input type="button" value="取值" id="quck" />
<input type="button" value="赋值" id="fuck" />
</body>
<script type="text/javascript">
//复选框所选中的值取出来
$("#quck").click(function(){
var ck = $(".ck");
for(var i=0;i<ck.length;i++)
{
//第2种写法用JS方式判断是不是选中 ck[i].checked
if(ck.eq(i).prop("checked"))
{
alert(ck.eq(i).val());
}
}
})
</script>
</html>
给周村赋值
$("#fuck").click(function(){ var zhi = "周村"; var ck = $(".ck"); for(var i=0;i<ck.length;i++) { if(ck.eq(i).val()==zhi) { ck.eq(i).prop("checked",true); } } })
第二种方法拼接 给周村赋值
$("#fuck").click(function(){
var zhi = "周村";
$("[value='"+zhi+"']").prop("checked",true);
})
对jquery操作复选框(checkbox)的12个小技巧进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
1、获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
2、 获取多个checkbox选中项
$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});
3、设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
4、设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
5、根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
6、选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');
7、根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');
8、删除Value=1的checkbox
$("input:checkbox[value='1']").remove();
9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
10、遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});
11、全部选中
$('input:checkbox').each(function() {
$(this).attr('checked', true);
});
12、全部取消选择
$('input:checkbox').each(function () {
$(this).attr('checked',false);
});
