Jquery checkbox全选,反选,全不选实例-阿里云开发者社区

开发者社区> 开发与运维> 正文

Jquery checkbox全选,反选,全不选实例

简介: $(function() { //全选 $("#checkAll").click(function() { $("[name='items']:checkbox").
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="</script'>http://www.bannei.com/site_media/js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
        $(function() {
            //全选
            $("#checkAll").click(function() {
                $("[name='items']:checkbox").attr("checked", true);


            });
            //反选
            $("#checkOpp").click(function() {
                $("[name='items']:checkbox").each(function() {

                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });
            //全不选
            $("#checkNO").click(function() { $("[name='items']:checkbox").attr("checked", false); });


            $("#SubmitID").click(function() {
                var Str = "你选中的是:\n\r";
                $("[name='items']:checkbox:checked").each(function() {
                    Str += $(this).val() + "\n\r";
                });
                alert(Str);
            });


        });
    </script>

</head>
<body>
    <form>
    <fieldset>
        <legend>你爱好的运动是?</legend>
        <div id="DIV1">
            <input type="checkbox" name="items" value="足球" />足球
            <input type="checkbox" name="items" value="篮球" />篮球
            <input type="checkbox" name="items" value="乒乓球" />兵乓球
            <input type="checkbox" name="items" value="跑步" />跑步
            <input type="checkbox" name="items" value="踢毽子" />踢毽子
            <input type="checkbox" name="items" value="俯卧撑" />俯卧撑
            <input type="checkbox" name="items" value="羽毛球" />羽毛球
        </div>
        <br>
        <input type="button" value="全选" id="checkAll" />
        <input type="button" value="反选" id="checkOpp" />
        <input type="button" value="全不选" id="checkNO" />
        <input type="button" value="取值" id="SubmitID" />
    </fieldset>
    </form>
</body>
</html>

  

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章