• js checkbox小总结


    /**     

    * 全选的所有指定名称的checkbox    

    *@state 全选的checkbox的状态    

    *@name   表格中的所有checkbox的名称    

    *@author fangtf    

    *@type void    

    */ 

    function selectAll(state,name) {      

        var ids = document.getElementsByName(name);      

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

        {             

                ids[i].checked = state;      

        }      

    }      

    /**     

    * 全选的所有指定id名称的同名checkbox    

    *@state 全选的checkbox的状态    

    *@name   表格中的所有checkbox的名称    

    *@name   表格中的所有checkbox的id    

    *@author fangtf    

    *@type void    

    */ 

    function selectAllCheckboxByID(state,name,id) {      

        var ids = document.getElementsByName(name);      

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

        {             

    if(ids[i].id == id)      

                {      

                    ids[i].checked = state;      

                }      

        }      

    }      

    /**     

    * 全选页面上所有的checkbox    

    *@state 全选的checkbox的状态    

    *@author fangtf    

    *@type void    

    */ 

    function selectAlls(state)       

    {      

        var inputs = document.getElementsByTagName("input");      

    for(var i =0;i 

        {      

    if(inputs[i].type == "checkbox")      

            {      

                inputs[i].checked =state;       

            }      

        }      

    }      

    /**    

    *得到鼠标所单击的行    

    *@type Object    

    */ 

    function GetRow(oElem) {      

    while (oElem) {      

    if (oElem.tagName.toLowerCase() == "tr" && oElem.parentElement.tagName.toLowerCase() == "tbody") {      

    return oElem;      

            }      

    if (oElem.tagName.toLowerCase() == "table" || oElem.tagName.toLowerCase() == "th") {      

    return false;      

            }      

            oElemoElem = oElem.parentElement;      

        }      

    }      

    /**     

    * 全选当前行的checkbox    

    *@state 全选的checkbox的状态    

    *@author fangtf    

    *@type void    

    */ 

    function selectRowCheckbox(state)      

    {      

      var row = GetRow(window.event.srcElement);      

      var cells = row.childNodes;       

    for(var i=0;i 

      {      

          var cell = cells[i].childNodes[0];      

    if(cell.tagName == "INPUT")      

         {      

            cell.checked = state;      

         }      

      }      

    }      

    /**     

    *选中指定值的Radio    

    *如:有两个radio,    

    *第一个的name="ids",value="1"   

    *第二个的name="ids",value="2"   

    *调用方法selectRadio("ids","1");    

    *那么数值为1的Radio将被选中    

    *@name radio的名称    

    *@value radio的值    

    *@author fangtf    

    *@type void    

    */ 

    function selectRadio(name,value) {      

        var radioObject = document.getElementsByName(name);      

    if(value === "")      

        {      

            radioObject[0].checked = true;      

    return;      

        }      

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

        {      

    if(radioObject[i].value == value)      

            {      

                radioObject[i].checked = true;      

    break;      

            }      

        }      

    }      

    /**     

    *选中指定值的checkbox    

    *如:有两个checkbox,    

    *第一个的name="ids",value="1"   

    *第二个的name="ids",value="2"   

    *第三个的name="ids",value="3"   

    *调用这个方法selectCheckbox("ids","1,2")那么数值为1,2的checkbox将被选中    

    *                    

    *@name 要选中的checkbox数组的名称    

    *@value 判断时候选中的值    

    *@author fangtf    

    *@type void    

    */ 

    function selectCheckbox(name,value) {      

        var checkObject = document.getElementsByName(name);      

        var valuevalues = value.split(",");      

    for(var j = 0; j < values.length; j++)      

        {      

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

            {      

    if(checkObject[i].value == values[j])      

                {      

                    checkObject[i].checked = true;      

    break;      

                }      

            }      

        }      

    }      

    /**     

    *选中指定值的select    

    *如:有一个名称为user的select    

    *   

    *   

    *调用这个方法selectOption("user","0")那么选项为0的选项就被选中    

    *                   

    *@name  String  select的名称    

    *@value String  判断时候选中的值    

    *@author fangtf    

    *@type void    

    */ 

    function selectOption(name,value)      

    {      

        var options = document.getElementsByName(name)[0].options;      

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

        {      

    if(options[i].value === value)      

            {      

                options[i].selected = true;       

    break;      

            }      

        }      

    }   

    以上内容来自CSDN博客,转载请标明出处:http://blog.csdn.net/jaketseng/archive/2009/02/18/3905733.aspx

    下面是个例子

    <html>   
    
    <head>  
    
     <script type="text/javascript"> 
    
    function $(id){
    
    return  document.getElementById(id);
    
    }
    
     
    
    String.prototype.trim = function () {
    
        return this.replace(/(^\s*)|(\s*$)/g, "");
    
    };
    
     
    
    /**      
    
    * 全选的所有指定名称的checkbox     
    
    *@state 全选的checkbox的状态     
    
    *@name   表格中的所有checkbox的名称     
    
    *@author fangtf     
    
    *@type void     
    
    */   
    
    function selectAll(state,name) {        
    
        var ids = document.getElementsByName(name);        
    
    for (var i = 0; i < ids.length; i++)         
    
        {               
    
                ids[i].checked = state;        
    
        }        
    
    }   
    
     
    
     
    
    /**      
    
    * 全选的所有指定id名称的同名checkbox     
    
    *@state 全选的checkbox的状态     
    
    *@name   表格中的所有checkbox的名称     
    
    *@name   表格中的所有checkbox的id     
    
    *@author fangtf     
    
    *@type void     
    
    */   
    
    function selectAllCheckboxByID(state,name,id) {        
    
        var ids = document.getElementsByName(name);        
    
    for (var i = 0; i < ids.length; i++)         
    
        {               
    
    if(ids[i].id == id)        
    
                {        
    
                    ids[i].checked = state;        
    
                } else{
    
    ids[i].checked = false;
    
    }       
    
      
    
        }        
    
    }    
    
     
    
    function foo()
    
    {
    
    var gloal = (function(){return this;}());
    
        //信号源过滤
    
        var chkObjs = document.getElementsByName("roViewType");
    
        var roViewTypeValue = "";
    
     
    
    //selectAll(true,"roViewType");
    
    selectAllCheckboxByID(true,"roViewType","roViewType10");
    
        for(var i=0,len=chkObjs.length;i<len;i++){
    
            if(chkObjs[i].checked){
    
            roViewTypeValue = chkObjs[i].value;
    
    $('detail').value = "checkboxValue:"+ roViewTypeValue+";checkboxText: "+chkObjs[i].nextSibling.nodeValue.trim()+";并设置"+chkObjs[i].nextSibling.nodeValue.trim()+"为选中的checkbox";
    
    //$("roViewType12").disabled = true; //不可用
    
    //$("detail").disabled = true; //不可用
    
    //$("detailtest").disabled = false; //可用
    
            break;
    
            }
    
        }
    
    }
    
      </script>  
    
     </head>  
    
     <body>
    
     
    
    <div height="100px">
    
    <fieldset>
    
    <legend><strong>信号类型</strong></legend>
    
    <input type="checkbox" id="roViewType0" name="roViewType" value="0" onclick="channelInitLw()" checked="true">所有信源
    
    <input type="checkbox" id="roViewType9" name="roViewType" value="9" onclick="channelInitLw()">中波调频广播
    
    <input type="checkbox" id="roViewType10" name="roViewType" value="10" onclick="channelInitLw()">有线模拟电视
    
    <input type="checkbox" id="roViewType1" name="roViewType" value="1" onclick="channelInitLw()">有线数字电视
    
    <input type="checkbox" id="roViewType8" name="roViewType" value="8" onclick="channelInitLw()">IPTV
    
    <input type="checkbox" id="roViewType7" name="roViewType" value="7" onclick="channelInitLw()">CMMB
    
    <input type="checkbox" id="roViewType6" name="roViewType" value="6" onclick="channelInitLw()"> DTMB
    
    <input type="checkbox" id="roViewType2" name="roViewType" value="2" onclick="channelInitLw()">卫星数字电视
    
    <input type="checkbox" id="roViewType11" name="roViewType" value="11" onclick="channelInitLw()">开路模拟电视
    
    <br>
    
    <input type="text" id="detail" name="qwe"  style=" 602px"  value="没有选择" >
    
    <input type="button" id="roViewType12" name="buttonname" value="获取选中的信息" onclick="foo()">
    
    <input type="text" id="detailtest" name="qwe"  style=" 50px"  value="test" >
    
    </fieldset>
    
    </div>
    
     
    
     </body>   
    
    </html> 
  • 相关阅读:
    谈谈Ext JS的组件——组件基类:Ext.Component
    谈谈Ext JS组件之引子
    安装Compass时不能访问服务器的问题
    Android监听电池状态
    为macbook双系统的windows装驱动
    Activity中的四种启动模式
    【翻译】Ext JS 6 Beta发布
    eclipse下出现奇怪字符的解决方法
    浅谈设计模式
    【翻译】Ext JS 5:为不同设备设置不同的主题
  • 原文地址:https://www.cnblogs.com/liwei45212/p/3026334.html
Copyright © 2020-2023  润新知