html 复选框全选、反选操作

夏已微凉、 JavaScript 2023-03-17 34 0 原文

html 复选框全选、反选操作

1、效果图

2、代码

<html>
<head>
    <title>html复选框全选、反选操作</title>
    <style>
        div.chooseClass{
	    display:inline-block;
	    width:100px;
        }   
    </style>
</head>
<script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script> <!-- 引入百度在线jquery -->
<body>
    <div style="margin:20px">
	<div id="content">
	    <!-- 元素 -->
	</div>
		
	<br/>
	<input type="checkbox" onclick="choose(this,1)"/>全选/全不选 &nbsp;
	<input type="checkbox" onclick="choose(this,2)"/>反选<br/>
    </div>
</body>

</html>


<script>
    $(function(){
        addOption();    //遍历要操作的元素
    });
    
    //全(不)选，反选方法
    function choose(obj, type) {
        if(type == 1){
            if ($(obj).is(":checked")) { // 全选
                $("[name=fruit]:checkbox").prop("checked", true);
                getValue();    //得到选中的值
            } else {
                $("[name=fruit]:checkbox").prop("checked", false);
                getValue(); //得到选中的值
            }
        }
        //反选
        if( type == 2 ){
            $("[name=fruit]:checkbox").each(function(){
                 $(this).prop("checked",!$(this).prop("checked"));
            });
            getValue(); //得到选中的值
        }
    }
    
    //遍历要操作的元素
    function addOption(){
        var option = ["苹果","杏子","海棠果","酸橙","板栗","樱桃","椰子","山核桃","金桔","砀山梨"];
        var html = '';
	var j = 0;
        for(var i=0;i<option.length;i++){
	    var isBr = '';
	    j++;
	    if(j%3==0){
		isBr = '<br>';
	    }
            html += '<div class="chooseClass"><input type="checkbox" name="fruit" value="'+option[i]+'"/>'+option[i]+'</div>' + isBr;
        }
        
        //把选项添加进div中
        $("#content").append(html);
    }
    
    //得到选中的值
    function getValue(){
        var optionArr =[];//定义一个多选数组    
          $('input[name="fruit"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数    
            optionArr.push($(this).val());//将选中的值添加到数组chk_value中    
        });
        alert('选中的值是:'+optionArr);
    }
        
</script>