码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 之玩转 checkbox

时间:2016-12-29 14:12:11      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:eve   utf-8   script   pre   反选   box   check   head   alert   

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src=‘http:cdn.bootcss.com/jquery/3.1.1/jquery.min.js‘></script>
</head>

<body>
    <form>
        <input type="checkbox" class="all"> 全选
        <input type="checkbox" class="reverse"> 反选
        <input type="checkbox" value="1" class="sub"> 1
        <input type="checkbox" value="2" class="sub"> 2
        <input type="checkbox" value="3" class="sub"> 3
        <input type="checkbox" value="4" class="sub"> 4
        
        

        <input type="button" value="click">
        <input type="reset">
    </form>
    <script type="text/javascript">
    $(function() {
        $(‘.all‘).on(‘click‘, function(e) {
            var isChecked = $(this).prop("checked");
            $(".sub").prop("checked", isChecked);
        })

        $(‘.reverse‘).on(‘click‘, function(e) {
            $(".sub").each(function(index, ele) {
                var checked = $(ele).is(‘:checked‘) ? ‘‘ : ‘checked‘
                $(ele).prop("checked", checked);
            })
        })

        $(‘.sub‘).on(‘click‘, function(e) {
            var checked = ($(‘.sub‘).length == $(‘.sub:checked‘).length ? ‘checked‘ : ‘‘)
            $(‘.all‘).prop(‘checked‘, checked)
        })

        $("input[type=‘button‘]").bind(‘click‘,function(){
            var obj = $(‘.sub‘).map(function(index,ele){
                return $(ele).val()
            })
            var arr = Array.prototype.slice.call(obj)
            alert(JSON.stringify(arr))
        })
    })
    </script>
</body>

</html>

 

jQuery 之玩转 checkbox

标签:eve   utf-8   script   pre   反选   box   check   head   alert   

原文地址:http://www.cnblogs.com/xuezizhenchengxuyuan/p/6232472.html

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