jquery 复选框反选

最新推荐文章于 2021-05-18 11:01:58 发布

转载最新推荐文章于 2021-05-18 11:01:58 发布 · 647 阅读

jquery 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，通过JavaScript实现了对表单元素的操作，包括获取选中的复选框值、全选、指定选择、反选及取消所有选择等功能。此外还包含一个下拉菜单选项的变更监听事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        padding:0;margin:0;
    }
</style>
</head>
<body>
    <input type="checkbox" name="WEEK" value="星期一" />星期一
    <input type="checkbox" name="WEEK" value="星期二" />星期二
    <input type="checkbox" name="WEEK" value="星期三" />星期三
    <input type="checkbox" name="WEEK" value="星期四" />星期四
    <input type="checkbox" name="WEEK" value="星期五" />星期五
    <input type="checkbox" name="WEEK" value="星期六" />星期六
    <input type="checkbox" name="WEEK" value="星期日" />星期日
    <br />
    <button class="btn">提示选择的值</button>
    <button class="btn2">全选</button>
    <button class="btn3">选择二日</button>
    <button class="btn4">反选</button>
    <button class="btn5">全不选</button>


 <select name="" id="" onchange="chan(this)">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select> 
</body>
</html>
<script type="text/javascript" src="../jq/js/jquery-1.11.3.js"></script>
<script type="text/javascript">
    function chan(item){
        alert( $(item).val());
     }
    $('.btn').on('click',function(){
        var str = '';
        var $check = $('input[type="checkbox"][name="WEEK"]:checked');
        // console.log($check[1]);
        console.log($check.get(1));
        // console.log($check);
        $.each($check, function(index, item){
            str += item.value + ',';
        });
        alert(str);
    });
    var str = '星期三,星期日,';

    $('.btn2').click(function(){
        $check = $('input[type="checkbox"][name="WEEK"]');
        // $check.each(function(index,item){
        //  $(item).prop('checked',true);
        // });
        $check.prop('checked',true);
    });
    $('.btn3').click(function(){
        var temp = str.split(',');
        var $check = $('input[type="checkbox"][name="WEEK"]');
        $.each(temp,function(key,val){
            $.each($check,function(index,item){
                if($(this).val() == val){
                    $(this).prop('checked', true);
                }
            })
        });

    });
    $('.btn4').click(function(){
        var $check = $('input[type="checkbox"][name="WEEK"]');
        $check.each(function(){
            this.checked = !this.checked;
        })
    });
    $('.btn5').click(function(){
        var $check = $('input[type="checkbox"][name="WEEK"]');
        $check.removeAttr('checked');

    })
</script>