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="２"
*调用方法selectRadio("ids","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="２"
*第三个的name="ids",value="3"
*调用这个方法selectCheckbox("ids","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="width: 602px" value="没有选择" > <input type="button" id="roViewType12" name="buttonname" value="获取选中的信息" onclick="foo()"> <input type="text" id="detailtest" name="qwe" style="width: 50px" value="test" > </fieldset> </div> </body> </html>
