JS对CHECKBOX的操作

原创 2007年10月12日 16:17:00

/**
* 全选的所有指定名称的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="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 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>

<script language="&#106avascript">
//全选或全部不选
function checkall(){
 var isChecked;
 if(document.ck.checkAll.checked==true)
  {
   isChecked=true;
   var elements=document.ck.elements;
   var counter=elements.length;
   var seltext=""; //定义变量存储所有选择项
   for(i=2;i<counter;i++){
     var element=elements[i];
     if(element.type=="checkbox"){
     element.checked=isChecked;
     seltext = seltext+element.&#118alue+","; //进行连接
    }
   }
   document.ck.allchecked.&#118alue = seltext.substr(0,seltext.length-1); //将值赋给form中的allchecked控件
   alert(document.ck.allchecked.&#118alue);
  }
 if(document.ck.checkAll.checked==false)
 {
  isChecked=false;
  var elements=document.ck.elements;
  var counter=elements.length;
  for(i=0;i<counter;i++){
    var element=elements[i];
    if(element.type=="checkbox"){
     element.checked=isChecked;
    }
   }
   document.ck.allchecked.&#118alue="";
   alert(document.ck.allchecked.&#118alue);
 }
}
 
//选择部分
function notcheckall(){
 var elements=document.ck.elements;
 var counter=elements.length;
 var seltext="";
 for(i=0;i<counter;i++){
  var element=elements[i];
  if((element.type=="checkbox")&&(element.checked==true)){
  seltext = seltext+element.&#118alue+","; //这是jscript中的变量而已
  }
 }
 document.ck.allchecked.&#118alue = seltext.substr(seltext,seltext.length-1);//賦值
 alert(document.ck.allchecked.&#118alue);
}
</script>
</body>
</html>

 

JavaScript操作checkbox复选框

JavaScript操作checkbox的方式和操作radio的方式相似,都是利用元素项的checked属性来完成。先获取checkbox元素集合,遍历集合,对集合中的每一项做操作。 这里讲几...
  • magi1201
  • magi1201
  • 2015年03月20日 22:59
  • 5068

如何用JS删除checkbox选中的记录

/** 选取选中的复选框的值 */ function checkbox_selected() {  var chkvalue = "";  var chk = window.document.g...
  • gfangxiong
  • gfangxiong
  • 2012年03月13日 16:52
  • 11766

JS对CHECKBOX的操作

/** * 全选的所有指定名称的checkbox *@state 全选的checkbox的状态 *@name 表格中的所有checkbox的名称 *@author fangtf ...
  • szg3827
  • szg3827
  • 2009年01月17日 13:25
  • 604

JQuery之复选框checkbox基本操作

利用JQuery实现复选框的基本操作,例如全选、全部选、获取选中值、获取未选中值、获取选中长度等操作。 下面直接看例子,例子中有详细的介绍了JQuery是如何实现这些功能的。 在使用JQuery之前要...
  • linzhiqiang0316
  • linzhiqiang0316
  • 2016年07月25日 21:49
  • 4292

实用的复选框操作——15分钟解决90%以上的javascript复选框操作

“复选框”页面: —————————————————————————————————————————————————————————————————— 实现功能: 1.点击标...
  • Allenalex
  • Allenalex
  • 2014年11月25日 18:45
  • 1785

Javascript对checkbox勾选判断,错误提示和按钮变色操作

同意相关条款未打钩时,登录按钮为灰色且无法提交,打钩后变成亮色且可以提交信息。 我同意相关条款 JS代码实现:function boxChange(obj){ if($(o...
  • qq_25103783
  • qq_25103783
  • 2017年10月19日 16:16
  • 244

用JS控制复选框的选择

 检查复选框选择个数:function checkednum(id)...{var s;s=0;for(i=0;idocument.selectform.keyVal.length;i++)...{ ...
  • cqinter
  • cqinter
  • 2007年07月26日 15:36
  • 5465

对checkbox的数据调用操作

function okClick(checkIds){        //将按钮设定为不可使用    document.zb.Submit.disabled =true;     //判断发送方式是否...
  • luj999
  • luj999
  • 2004年11月09日 17:25
  • 602

【JavaScript】DOM操作复选框

DOM操作复选框 实现一个效果如下图: 点击"全选/全不选"复选框之后,足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后,被选中的所有都变成未选中。点击"全选"按钮之后,足球、篮球...
  • u013517797
  • u013517797
  • 2015年08月26日 21:05
  • 1354

checkbox,js验证必须选择一个

Js: var obj = document.getElementsByName('cat4[]'); var count=obj.length; var j=0; for...
  • wust_star
  • wust_star
  • 2012年09月28日 18:29
  • 3221
收藏助手
不良信息举报
您举报文章:JS对CHECKBOX的操作
举报原因:
原因补充:

(最多只允许输入30个字)