码迷,mamicode.com
首页 > 编程语言 > 详细

js-使用JavaScript、jQuery两种方式实现全选/全不选

时间:2016-07-21 06:27:43      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:

html代码

<input type=‘checkbox‘ value="10" name="frust"/>苹果10元
     <br/>
    <input type=‘checkbox‘ value="20" name="frust" />西瓜20元
    <br/>
    <input type=‘checkbox‘ value="30" name="frust" />桃子30元
    <br/>
    <input type=‘checkbox‘ value="40" name="frust" />桂圆40元
    <br/>
    <input type=‘checkbox‘ value="50" name="frust">火龙果50元
    <br/><br/><br/>
    <input type="checkbox" onclick="allcheck(this)" id="chose"/>全选
     <button id=‘btn‘ onclick="fanxuan">反选</button>

 

javascript:

   

 function allcheck(currentobj){

         var frusts = doucment.getElementsByName(‘frust‘);

             if(currentobj.checked){

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

          frusts[i].checked=true;

      }

    }else{

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

          frusts[i].checked=false;

      }

      }

  }
function fanxuan(){
    var frusts = document.getElementsByName(‘frust‘);
          for(var i=0;i<frusts.length;i++){
                if(frusts[i].checked){
                    frusts[i].checked = false;
                }else{
                    frusts[i].checked = true;
                }
          }
    }

 

jquery:

 

<script src="jquery.min.js" type="text/javascript"></script>
<script type="javascript">
$(document).ready(function(e){
    $("#chose").bind(‘click‘,function(){
          if($(this).attr(‘checked‘)){
         $("input[name=‘frust‘]").attr(‘checked‘,true);
       }else{
         $("input[name=‘frust‘]").attr(‘checked‘,false);
       }    
    });
  
})
$(document).ready(function(e){
     $("#btn").click(function(){
     $("input[name=‘frust‘]").each(function(){
         if($(this).attr(‘checked‘)){
            $(this).attr(‘checked‘,false); //也可以使用$(this).removeAttr("checked");
         }else{
            $(this).attr(‘checked‘,true);//$(this).attr("checked","checked");这些写也可以 我记得radio与checkbox选中一个是true一个是checked=checked  
         }
      });
     });
})
</script>

 

js-使用JavaScript、jQuery两种方式实现全选/全不选

标签:

原文地址:http://www.cnblogs.com/YangJieCheng/p/5690282.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!