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

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']").prop('checked',true);
       }else{
         $("input[name='frust']").prop('checked',false);
       }    
    });
  
})
$(document).ready(function(e){
     $("#btn").click(function(){
     $("input[name='frust']").each(function(){
         if($(this).attr('checked')){
            $(this).prop('checked',false); //也可以使用$(this).removeAttr("checked");
         }else{
            $(this).prop('checked',true);//$(this).attr("checked","checked");这些写也可以 我记得radio与checkbox选中一个是true一个是checked=checked  
         }
      });
     });
})
</script>