全选、全部选、反选、提交 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form>
        <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="button" id="CheckedAll" value="全选">
        <input type="button" id="CheckedNo" value="全不选">
        <input type="button" id="CheckedRev" value="反选">
        <input type="button" id="send" value="提交">
    </form>
    
</body>
<!-- <script type="text/javascript" src="js/jquery-3.2.1.js"></script> -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#CheckedAll").click(function(){
            $('[name=items]:checkbox').attr('checked',true);
        });
        $("#CheckedNo").click(function(){
            $("[name=items]:checkbox").attr('checked',false)
        });
        $("#CheckedRev").click(function(){
            $("[name=items]:checkbox").each(function(){
                // $(this).attr("checked",!$(this).attr("checked"))
                this.checked=!this.checked;
            })
        });
        $("#send").click(function(){
            var str="你选中的是：\r\n";
            $('[name=items]:checkbox:checked').each(function(){
                str+=$(this).val()+"\r\n";
            });
            alert(str)
        })
    })
</script>
</html>

 

posted @ 2017-08-24 14:08  Jinsuo  阅读(260)  评论(0)    收藏  举报