首页 > 其他 > 详细

全选框和复选框

时间:2014-09-24 16:19:08      阅读:313      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复选框</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <form action="">
        你喜欢的动漫是<br>
        <input type="checkbox" name="manga" value="火影">
        <input type="checkbox" name="manga" value="海贼王">
        <input type="checkbox" name="manga" value="死神">
        <input type="checkbox" name="manga" value="妖精的尾巴">
        <input type="checkbox" name="manga" value="虫师">
        <input type="checkbox" name="manga" value="灌篮高手">

        <input type="button" id="All" value="全选">
        <input type="button" id="No" value="全不选">
        <input type="button" id="Rev" value="反选">

        <input type="button" id="send" value="提交">
    </form>

    <script>
        var str = document.getElementsByName(‘manga[]‘);
        $(‘#All‘).click(function(){
            $(‘[name=manga]:checkbox‘).prop(‘checked‘, true);
        })

        $(‘#No‘).click(function(){
            $(‘[name=manga]:checkbox‘).attr(‘checked‘, false);
        })

        $(‘#Rev‘).click(function(){
            $(‘[name=manga]:checkbox‘).each(function(){
                // $(this).attr(‘checked‘, !$(this).attr(‘checked‘));
                this.checked = !this.checked;
            })
        })

        $(‘#send‘).click(function(){
            var str = ‘你选中的是: \r\n‘;
            $(‘[name=manga]:checkbox:checked‘).each(function(){
                str += $(this).val() + ‘\r\n‘;
            })
            alert(str);
        })
    </script>
</body>
</html>


全选框和复选框

原文:http://my.oschina.net/1388018/blog/318148

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!