JQuery实现checkbox的全/不全选,以及反选功能

 第一步:编写前端页面test.html,JQuery核心文件jquery.js见附件

<head>
  <title>JQuery实现checkbox的全/不全选,以及反选功能</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="text.js"></script>

 </head>

 <body>
 <input type="button" id="sel" value="全选" />
 <input type="button" id="dissel" value="反选" />
 <input type="checkbox" value="1" />CheckBox1
 <input type="checkbox" value="2" />CheckBox2
 <input type="checkbox" value="3" />CheckBox3
 <input type="checkbox" value="4" />CheckBox4
 </body>
</html>

第二步:编写text.js文件

$(function(){
 var checkboxs = $("input[type='checkbox']");
 var flag = true;
 $("#sel").click(function(){
  if($("#sel").val()=="不全选"){
   $("#sel").val("全选");
   flag = false;
  }else{
   $("#sel").val("不全选");
   flag = true;
  }
  checkboxs.each(function(){
   flag?$(this).attr("checked",true):$(this).removeAttr("checked");
  });
 });
 $("#dissel").click(function(){
  checkboxs.each(function(){
   $(this).attr("checked")?$(this).removeAttr("checked"):$(this).attr("checked",true);
  });
 });
});

你可能感兴趣的:(JavaScript,html,jquery)