摘要：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);
});
还没有人抢沙发呢~