Checkbox 全选、反选

1.全选、反选

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#selall").on("click", function () { $("#plalst :checkbox").prop("checked", true); });
            $("#selnone").on("click", function () { $("#plalst :checkbox").prop("checked", false); });
            $("#resver").on("click", function () { $("#plalst :checkbox").prop("checked", function (i, val) { return !val; }); });
            $("#chkAll").on("click", function () { $("#plalst :checkbox").prop("checked",  $("#chkAll").prop("checked")) });

        });
    </script>
</head>
<body>
    <div id="plalst">
        <input type="checkbox" />一队
        <input type="checkbox" />二队
        <input type="checkbox" />三队
        <input type="checkbox" />四队
        <input type="checkbox" />五队
        <input type="checkbox" />六队
    </div>
    <br /><br /><br />
    <input type="button" id="selall" value="全选" />
    <input type="button" id="selnone" value="全不选" />
    <input type="button" id="resver" value="反选" />
    <input type="checkbox" id="chkAll" /><label for="chkAll" >选择</label>
</body>
</html>

  在线测试：http://www.runoob.com/try/try.php?filename=tryjquery_hide

posted @ 2016-10-19 14:01  森林王子  阅读(128)  评论(0)  编辑  收藏  举报