Jquery---checkbox的全选或者全部取消

时间:2022-07-01 09:28:45

    checkbox是我们在系统开发中不可避免地要使用的一个控件。通常的用法就是,任意选中多个checkbox、全选或者全部取消。前段时间刚又碰到了checkbox这方面的用法。几天就抽点时间,简单地总结一下,希望给想要使用checkbox控件的朋友们一点儿帮助。

    有时候我们要点击一个checkbox控件,它被选中时,其它checkbox全部被选中,再点击它,即取消选中它,其它checkbox全部被取消选中。这时候我们就可以在HTML或者.jsp文件中使用如下代码来实现此功能。代码如下:

 
<html> 
<body> <input type="checkbox" name="ckb" value="1"/><span>苹果</span> <input type="checkbox" name="ckb" value="2"/>橘子 <input type="checkbox" name="ckb" value="3"/>梨子 <input type="checkbox" name="ckb" value="4"/>香蕉 <button id="all_checked" type="button">全选</button> <button id="all_uncheck">反选</button> </body>  <script type="text/javascript">    $(document).ready(function(){    $('#all_checked').click(function(){    $('input:checkbox[name="ckb"]').each(function() {    $(this).prop('checked',true);    });    });    $('#all_uncheck').click(function(){    $('input:checkbox[name="ckb"]').each(function () {         $(this).prop('checked',false); });    })       })           </script>
</html>选中了复选框checkbox,那么如何获取被选中的复选框checkbook的值呢?

function jqchk(){ //jquery获取复选框值 
var chk_value =[]; 
$("input[name="ckb"]:checked").each(function(){ 
chk_value.push($(this).val()); 
}); 
alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value); 
} 
以上就是checkbox常用的几个功能,希望能给小伙伴们一点帮助。