复选框全选,反选

来源：互联网发布：桔豆盒子网络机顶盒编辑：程序博客网时间：2024/05/23 17:20

一.格式(一)

在jQuery1.6以后,常用的版本为(jquery-1.8.3,即在此版本中使用.porp()方法来代替.attr()方法)的版本中.attr()方法必须使用.prop()方法代替,否则会出现问题

html代码:

<div id="main">   <div class="demo">        <ul id="list">              <li><label><input type="checkbox" value="1"> 1.唐太宗</label></li>            <li><label><input type="checkbox" value="2"> 2.武则天</label></li>            <li><label><input type="checkbox" value="3"> 3.唐玄宗</label></li>            <li><label><input type="checkbox" value="4"> 4.太平公主</label></li>            <li><label><input type="checkbox" value="5"> 5.杨贵妃</label></li>        </ul>        <input type="checkbox" id="all">        <input type="button" value="全选" class="btn" id="selectAll">          <input type="button" value="全不选" class="btn" id="unSelect">          <input type="button" value="反选" class="btn" id="reverse">          <input type="button" value="获得选中的所有值" class="btn" id="getValue">      </div></div>

js代码:

$(function () {    //全选或全不选--<input type="checkbox" id="all">    $("#all").click(function(){           if(this.checked){               $("#list :checkbox").prop("checked", true);          }else{               $("#list :checkbox").prop("checked", false);        }        });     //全选--<input type="button" value="全选" id="selectAll">      $("#selectAll").click(function () {         $("#list :checkbox,#all").attr("checked", true);      });      //全不选--<input type="button" value="全不选" id="unSelect">    $("#unSelect").click(function () {           $("#list :checkbox,#all").attr("checked", false);      });      //反选--<input type="button" value="反选" id="reverse">    $("#reverse").click(function () {          $("#list :checkbox").each(function () {                $(this).attr("checked", !$(this).attr("checked"));           });         allchk();    });    //设置全选复选框    $("#list :checkbox").click(function(){        allchk();    });    //获取选中选项的值    $("#getValue").click(function(){        var valArr = new Array;        $("#list :checkbox[checked]").each(function(i){            valArr[i] = $(this).val();        });        var vals = valArr.join(',');          alert(vals);    });}); function allchk(){    var chknum = $("#list :checkbox").size();//选项总个数    var selnum = $("#list :checkbox[checked]").size();//选项总个数    if(chknum==selnum){        $("#all").attr("checked",true);    }else{        $("#all").attr("checked",false);    }}

0 0