您的位置：首页 > Web前端 > HTML

html复选框全选、反选操作

2018-02-26 12:42 295 查看

<html>

<head>

   <title>html复选框全选、反选操作</title>

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

<body>

   <input type="checkbox" onclick="choose(this,1)"/>全选/全不选

   <input type="checkbox" onclick="choose(this,2)"/>反选<br/><hr/>



   <div id="content">

       

   </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 = '';

       for(var i=0;i<option.length;i++){

           html += '<input type="checkbox" name="fruit" value="'+option[i]+'"/>'+option[i]+'<br/>';

       }



       //把选项添加进div中

       $("#content").append(html);

   }



   //得到选中的值

   function getValue(){

       var optionArr =[];//定义一个多选数组

       $('input[name="fruit"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数

           optionArr.push($(this).val());//将选中的值添加到数组chk_value中

        });

       alert('选中的值是:'+optionArr);

   }



</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端 jquery

相关文章推荐

新的分享

章节导航