zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Text box to accept only number
    两个经典的Oracle触发器示例
    ELK部署
    Win10+CentOS7双系统引导修复
    自定义多选框(checkbox)和单选框(radio)css样式
    js事件
    js数组与字符串处理 slice、splice、substring、substr、push、pop、shift、reverse、sort、join、split
    css入门基础
    cocos2dx基础篇(7) 触碰事件
    cocos2dx基础篇(6) 定时器schedule/update
  • 原文地址:https://www.cnblogs.com/YangJieCheng/p/5690282.html
Copyright © 2011-2022 走看看