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> 
原文地址:https://www.cnblogs.com/liwei45212/p/3026334.html