最新消息:欢迎访问刘磊博客

JQurey 实现多选框 全选和反选

javascript 飞翔的mouse 65浏览

全选和反选的操作思路如下:

首先获得全选反选框的状态值。

其次将所有的多选框加入列表 可以根据标签 可以根据ID name还可以根据class 等等方式 形成数组

最后 循环 设置每个多选框的值=全选/反选框的状态值。

我的写法如下。

<?php
header("content-type:text/html;charset=utf8");
?>
<html>
<head>
    <title>内容多选测试</title>
</head>
<body>
<form name="duoxuan" action="duoxuan.php?act=delete">
    <div>
        <dl>
                <?php
                for ($i = 0; $i < 10; $i++) {
                ?>
                <dd>第<?php echo $i + 1; ?>个多选框:<input name="dxk" type="checkbox"></dd>
                <?php
            }
            ?>
            <dd>全选<input type="checkbox" name="chkall" id="all" onclick="xuan(this.checked)"></dd>
        </dl>
        <dl>
            <dd>
                <button type="submit" value="提交">提交</button>
            </dd>
        </dl>
        <script>
            function xuan(e) {
                var a = document.getElementsByName('dxk');
                for (var i = 0; i < a.length; i++) {
                    a[i].checked = e;
                }
            }

        </script>
    </div>
</form>
</body>
</html>

网上找了两个写法如下。

第二个写法和我的思路基本一样

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="checkbox" value="1" onclick="check()" />全选/反选 <br />
<input type="checkbox" value="${article.id}" name="box" class="item" />奶茶<br />
<input type="checkbox" value="${article.id}" name="box" class="item"/>香蕉<br />
<input type="checkbox" value="${article.id}" name="box" class="item"/>橘子<br />
<input type="checkbox" value="${article.id}" name="box" class="item"/>苹果<br />
<input type="checkbox" value="${article.id}" name="box" class="item"/>梨子<br />
<script type="text/javascript">
    function quanxuan(){
        var $checkbox = $(".item");
        var $checked = $checkbox.filter(":checked");
        if($checkbox.length == $checked.length){
            $("#checkbox").prop("checked",true);
        }else{
            $("#checkbox").prop("checked",false);
        }
    }
    $(function(){
        $("#checkbox").on("change",function(){
            var checked = $(this).prop("checked"); // true / false
            $(".item").prop("checked",checked);
            quanxuan();
        });
        $("body").on("change" , ".item",function(e){
            quanxuan();
        });
    });
</script>
</body>
</html>

第二种纯粹的js写法

<html>
<meta charset="UTF-8">
<head>
    <title>复选框checked属性</title>
    <script language="JavaScript" type="text/javascript">
        function changeState(isChecked)
        {
            var chk_list=document.getElementsByTagName("input");
            for(var i=0;i<chk_list.length;i++)
            {
                if(chk_list[i].type=="checkbox")
                {
                    chk_list[i].checked=isChecked;
                }
            }
        }
    </script>
</head>
<body>
<h1>请选择你的爱好</h1>
<form name="myForm1">
    <input type="checkbox" name="cb1" checked>看书<br>
    <input type="checkbox" name="cb2" checked>上网<br>
    <input type="checkbox" name="cb3">游戏<br>
</form>
<hr>
<form name="myForm2">
    <input type="checkbox" name="cb" onclick="changeState(this.checked)">全选
</form> </body>
</html>

转载请注明:刘磊博客 » JQurey 实现多选框 全选和反选