JS对CHECKBOX的操作

最新推荐文章于 2024-09-22 23:26:43 发布

yjmtv0817

最新推荐文章于 2024-09-22 23:26:43 发布

阅读量2.8k

点赞数

文章标签： function input xhtml string table html

本文链接：https://blog.csdn.net/yjmtv0817/article/details/1822049

版权

/**
* 全选的所有指定名称的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<inputs.length;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;
}
oElemoElemoElem = 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<cells.length;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 valuevaluevalues = 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
*<option value="0"></option>
*<option value="1"></option>
*调用这个方法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;
}
}

}

JS实现CheckBox多项选择值传递

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多项选择</title>
</head>

<body>
<center>
<table width="460" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<form name="ck" Method="" action="">
<input type="hidden" name="allchecked">
全选:<input type="checkbox" id="checkAll"＆#111nclick="checkall()" />
多项选择框列表:
<input type="checkbox" name="cb" ＆#118alue="1"/>
<input type="checkbox" name="cb" ＆#118alue="2"/>
<input type="checkbox" name="cb" ＆#118alue="3"/>
<input type="checkbox" name="cb" ＆#118alue="4"/>
<input type="checkbox" name="cb" ＆#118alue="5"/>
<input type="checkbox" name="cb" ＆#118alue="6"/>
<input name="Submit" type="button" ＆#118alue="提交" ＆#111nclick="notcheckall()">
</form>
</td>
</tr>
</table>
</center>