jQuery 实现 Checkbox 的全选、全不选和反向选择的功能

最新推荐文章于 2024-07-24 11:09:48 发布

weixin_34060741

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量78

点赞数

文章标签： javascript xhtml ViewUI

原文链接：https://my.oschina.net/dkiss/blog/618101

版权

为什么80%的码农都做不了架构师？>>>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="//cdn.bootcss.com/jquery/1.8.2/jquery.js"></script>
</head>
<body>
<input type='checkbox' name='id' value='1'/>1
<input type='checkbox' name='id' value='2'/>2
<input type='checkbox' name='id' value='3'/>3
<input type='checkbox' name='id' value='4'/>4
<input type='checkbox' name='id' value='5'/>5
<br/>
<input type='button' id='CheckedAll' onclick="select_all()" value="全选"/>
<input type='button' id='CheckedAll2' onclick="unselect_all()" value="全不选"/>
<input type='button' id='CheckedAll3' onclick="select_other()" value="返选"/>

</body>
</html>

<script>
  function select_all(){
    $("input[name='id']").attr("checked", true);
}

//全不选
function unselect_all(){
    $("input[name='id']").attr("checked", false); 
}
 
//反向选择
function select_other(){
    jQuery.each($("input[name='id']"), function(i, n){
    n.checked = !n.checked;
    }); 
}
</script>

转载于:https://my.oschina.net/dkiss/blog/618101