码迷,mamicode.com
首页 > 其他好文 > 详细

全选框和复选框

时间:2014-09-24 17:11:17      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:io   ar   for   sp   cti   on   c   html   ad   

<!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>


全选框和复选框

标签:io   ar   for   sp   cti   on   c   html   ad   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!