使用Javascript根据条件checkbox的选择

zhonyijun 2011-11-25 04:33:36

<input type=checkbox name=All onclick="check1()">全选(张三/李三/老三)<br/>
<input type=checkbox name=All onclick="check2()">全选(老一/老二/老三)<br/>
<input type=checkbox name=All onclick="check3()">全选(李三/老二/小明/小李)<br/>
<input type=checkbox name=All onclick="check4()">全选(全部)<br/>
<input type=checkbox name=01 value="张三" onclick=""><br/>
<input type=checkbox name=02 value="李三" onclick=""><br/>
<input type=checkbox name=03 value="老一" onclick=""><br/>
<input type=checkbox name=04 value="老二" onclick=""><br/>
<input type=checkbox name=05 value="老三" onclick=""><br/>
<input type=checkbox name=06 value="小明" onclick=""><br/>
<input type=checkbox name=07 value="大红" onclick=""><br/>
<input type=checkbox name=08 value="小李" onclick=""><br/>

求Javascript代码，谢谢！
...全文
151 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhonyijun 2011-11-28
  • 打赏
  • 举报
 回复
<td onclick="check2(this)"><input type=checkbox name=All>全选(老一/老二/老三)</td>
<td onclick="check3(this)"><input type=checkbox name=All>全选(李三/老二/小明/小李)</td>
两个全选后只保留相同值“老二”的input.checked = true

<td onclick="check1(this)"><input type=checkbox name=All>全选(张三/李三/老三)</td>
<td onclick="check2(this)"><input type=checkbox name=All>全选(老一/老二/老三)</td>
<td onclick="check3(this)"><input type=checkbox name=All>全选(老三/老二/小明/小李)</td>
三个全选后只保留相同值“老三”的input.checked = true

总结以上：取共同值为input.checked = true

求老大帮忙，谢谢！


[Quote=引用 10 楼 hookee 的回复:]
HTML code

<script type="text/javascript">
function doit(s, b){
var a = s.split("/");
var ck = document.getElementsByTagName("input");
for(var i=0;i<ck.length;i++){
if(ck[i].type=="chec……
[/Quote]
hookee 2011-11-27
  • 打赏
  • 举报
 回复 


<script type="text/javascript">

function doit(s, b){

  var a = s.split("/");

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

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

  if(ck[i].type=="checkbox"){

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

  if(ck[i].value==a[j]){

      ck[i].checked = b;

      if(b) ck[i].parentNode.style.background = "red";

      else ck[i].parentNode.style.background = "transparent";

  }

  }

  }

  }

}

function check1(obj){

  var input = obj.getElementsByTagName("input")[0];

  if(obj.style.backgroundColor=="red"){

  	obj.style.backgroundColor="transparent"

  	input.checked = false;

  }

  else{

  	obj.style.backgroundColor="red"

  	input.checked = true;

  }

  doit("张三/李三/老三", input.checked);

}

function check2(obj){

  var input = obj.getElementsByTagName("input")[0];

  if(obj.style.backgroundColor=="red"){

  	obj.style.backgroundColor="transparent"

  	input.checked = false;

  }

  else{

  	obj.style.backgroundColor="red"

  	input.checked = true;

  }

  doit("老一/老二/老三", input.checked);

}

function check3(obj){

  var input = obj.getElementsByTagName("input")[0];

  if(obj.style.backgroundColor=="red"){

  	obj.style.backgroundColor="transparent"

  	input.checked = false;

  }

  else{

  	obj.style.backgroundColor="red"

  	input.checked = true;

  }

  doit("李三/老二/小明/小李", input.checked);

}

function check4(obj){

  var input = obj.getElementsByTagName("input")[0];

  var b;

  if(obj.style.backgroundColor=="red"){

  	obj.style.backgroundColor="transparent"

  	b = input.checked = false;

  }

  else{

  	obj.style.backgroundColor="red"

  	b = input.checked = true;

  }

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

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

  if(ck[i].type=="checkbox"){

  if(ck[i].name!="All"){

      ck[i].checked = b;

      if(b) ck[i].parentNode.style.backgroundColor = "red";

      else ck[i].parentNode.style.backgroundColor = "transparent";

  }

  }

  }

    

}

</script>

</head>

<table>

<tr>

<td onclick="check1(this)"><input type=checkbox name=All>全选(张三/李三/老三)</td>

<td onclick="check2(this)"><input type=checkbox name=All>全选(老一/老二/老三)</td>   

<td onclick="check3(this)"><input type=checkbox name=All>全选(李三/老二/小明/小李)</td>

<td onclick="check4(this)"><input type=checkbox name=All>全选(全部)</td>

</tr></table>

<table>

  <tr>   

<td id="01"><input type=checkbox name=01 value="张三" onclick="">张三</td>   

<td id="01"><input type=checkbox name=02 value="李三" onclick="">李三 </td>   

<td id="01"><input type=checkbox name=03 value="老一" onclick="">老一</td>   

<td id="01"><input type=checkbox name=04 value="老二" onclick="">老二</td>

<td id="01"><input type=checkbox name=05 value="老三" onclick="">老三</td>   

<td id="01"><input type=checkbox name=06 value="小明" onclick="">小明</td>   

<td id="01"><input type=checkbox name=07 value="大红" onclick="">大红</td>  

<td id="01"><input type=checkbox name=08 value="小李" onclick="">小李</td>  

</tr>

</table>
zhonyijun 2011-11-27
  • 打赏
  • 举报
 回复
大哥！onclick放到TD里点击好一点，能把onclick放在TD里吗？？？？？要求checked = true 后TD变红色，checked = false后TD背景变回白色！
<table>
<tr>
<td onclick="check1(this)"><input type=checkbox name=All>全选(张三/李三/老三)</td>
<td onclick="check1(this)"><input type=checkbox name=All>全选(老一/老二/老三)</td>
<td onclick="check1(this)"><input type=checkbox name=All>全选(李三/老二/小明/小李)</td>
<td onclick="check1(this)"><input type=checkbox name=All>全选(全部)</td>
</tr></table>


[Quote=引用 7 楼 hookee 的回复:]
HTML code

<script type="text/javascript">
function doit(s, b){
var a = s.split("/");
var ck = document.getElementsByTagName("input");
for(var i=0;i<ck.length;i++){
if(ck[i].type=="chec……
[/Quote]
zhonyijun 2011-11-26
  • 打赏
  • 举报
 回复
加个else就好了！


谢谢！大哥太感谢你了，小弟能拜你为师吗？
hookee 2011-11-26
  • 打赏
  • 举报
 回复 


<script type="text/javascript">

function doit(s, b){

  var a = s.split("/");

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

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

  if(ck[i].type=="checkbox"){

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

  if(ck[i].value==a[j]){

  	ck[i].checked = b;

  	if(b) ck[i].parentNode.style.background = "red";

  	else ck[i].parentNode.style.background = "transparent";

  }

  }

  }

  }

}

function check1(obj){

  doit("张三/李三/老三", obj.checked);

}

function check2(obj){

  doit("老一/老二/老三", obj.checked);

}

function check3(obj){

  doit("李三/老二/小明/小李", obj.checked);

}

function check4(obj){

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

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

  if(ck[i].type=="checkbox"){

  if(ck[i].name!="All"){

  	ck[i].checked = obj.checked;

  	if(obj.checked) ck[i].parentNode.style.background = "red";

  	else ck[i].parentNode.style.background = "transparent";

  }

  }

  }

    

}

</script>

</head>

<input type=checkbox name=All onclick="check1(this)">全选(张三/李三/老三)<br/>

<input type=checkbox name=All onclick="check2(this)">全选(老一/老二/老三)<br/>   

<input type=checkbox name=All onclick="check3(this)">全选(李三/老二/小明/小李)<br/>   

<input type=checkbox name=All onclick="check4(this)">全选(全部)<br/>  

<table>

  <tr>   

<td id="01"><input type=checkbox name=01 value="张三" onclick="">张三</td>   

<td id="01"><input type=checkbox name=02 value="李三" onclick="">李三 </td>   

<td id="01"><input type=checkbox name=03 value="老一" onclick="">老一</td>   

<td id="01"><input type=checkbox name=04 value="老二" onclick="">老二</td>

<td id="01"><input type=checkbox name=05 value="老三" onclick="">老三</td>   

<td id="01"><input type=checkbox name=06 value="小明" onclick="">小明</td>   

<td id="01"><input type=checkbox name=07 value="大红" onclick="">大红</td>  

<td id="01"><input type=checkbox name=08 value="小李" onclick="">小李</td>  

</tr>

</table>
zhonyijun 2011-11-26
  • 打赏
  • 举报
 回复
<script type="text/javascript">
function doit(s, b){
var a = s.split("/");
var ck = document.getElementsByTagName("input");
for(var i=0;i<ck.length;i++){
if(ck[i].type=="checkbox"){
for(var j=0;j<a.length;j++){
if(ck[i].value==a[j]) ck[i].checked = b;
}
}
}
}
function check1(obj){
doit("张三/李三/老三", obj.checked);
}
function check2(obj){
doit("老一/老二/老三", obj.checked);
}
function check3(obj){
doit("李三/老二/小明/小李", obj.checked);
}
function check4(obj){
var ck = document.getElementsByTagName("input");
for(var i=0;i<ck.length;i++){
if(ck[i].type=="checkbox"){
if(ck[i].name!="All") ck[i].checked = obj.checked;
}
}

}
</script>
</head>
<input type=checkbox name=All onclick="check1(this)">全选(张三/李三/老三)<br/>
<input type=checkbox name=All onclick="check2(this)">全选(老一/老二/老三)<br/>
<input type=checkbox name=All onclick="check3(this)">全选(李三/老二/小明/小李)<br/>
<input type=checkbox name=All onclick="check4(this)">全选(全部)<br/>
<table>
<tr>
<td id="01"><input type=checkbox name=01 value="张三" onclick="">张三</td>
<td id="01"><input type=checkbox name=02 value="李三" onclick="">李三 </td>
<td id="01"><input type=checkbox name=03 value="老一" onclick="">老一</td>
<td id="01"><input type=checkbox name=04 value="老二" onclick="">老二</td>
<td id="01"><input type=checkbox name=05 value="老三" onclick="">老三</td>
<td id="01"><input type=checkbox name=06 value="小明" onclick="">小明</td>
<td id="01"><input type=checkbox name=07 value="大红" onclick="">大红</td>
<td id="01"><input type=checkbox name=08 value="小李" onclick="">小李</td>
</tr>
</table>

我要的效果就是input被勾相对应的TD背景变红色，勾取消就变回白色，不是全部背景变色！谢谢高人指教小弟！




[Quote=引用 5 楼 hookee 的回复:]
if(ck[i].value==a[j]){
ck[i].checked = b;
if(b) ck[i].parentNode.style.background = "red";
}
[/Quote]
hookee 2011-11-26
  • 打赏
  • 举报
 回复
if(ck[i].value==a[j]){
ck[i].checked = b;
if(b) ck[i].parentNode.style.background = "red";
}
zhonyijun 2011-11-26
  • 打赏
  • 举报
 回复
你好！感谢你的回复，对我非常有用，但还有一个问题想请教！我想在每个input用TD分开，如果被选中的INPUT的对应TD背景变颜色应该怎么写？

[Quote=引用 2 楼 hookee 的回复:]
HTML code

<script type="text/javascript">
function doit(s, b){
var a = s.split("/");
var ck = document.getElementsByTagName("input");
for(var i=0;i<ck.length;i++){
if(ck[i]……
[/Quote]
zhonyijun 2011-11-25
  • 打赏
  • 举报
 回复
谢谢哦额@[Quote=引用 2 楼 hookee 的回复:]
HTML code


<script type="text/javascript">
function doit(s, b){
var a = s.split("/");
var ck = document.getElementsByTagName("input");
for(var i=0;i<ck.length;i++){
if(ck[……
[/Quote]
hookee 2011-11-25
  • 打赏
  • 举报
 回复 


<script type="text/javascript">

function doit(s, b){

	var a = s.split("/");

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

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

		if(ck[i].type=="checkbox"){

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

				if(ck[i].value==a[j]) ck[i].checked = b;

			}

		}

	}

}

function check1(obj){

	doit("张三/李三/老三", obj.checked);

}

function check2(obj){

	doit("老一/老二/老三", obj.checked);

}

function check3(obj){

	doit("李三/老二/小明/小李", obj.checked);

}

function check4(obj){

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

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

		if(ck[i].type=="checkbox"){

				if(ck[i].name!="All") ck[i].checked = obj.checked;

		}

	}

	

}

</script>

</head>

<input type=checkbox name=All onclick="check1(this)">全选(张三/李三/老三)<br/>

<input type=checkbox name=All onclick="check2(this)">全选(老一/老二/老三)<br/>   

<input type=checkbox name=All onclick="check3(this)">全选(李三/老二/小明/小李)<br/>   

<input type=checkbox name=All onclick="check4(this)">全选(全部)<br/>   

<input type=checkbox name=01 value="张三" onclick="">张三<br/>   

<input type=checkbox name=02 value="李三" onclick="">李三<br/>   

<input type=checkbox name=03 value="老一" onclick="">老一<br/>   

<input type=checkbox name=04 value="老二" onclick="">老二<br/>   

<input type=checkbox name=05 value="老三" onclick="">老三<br/>   

<input type=checkbox name=06 value="小明" onclick="">小明<br/>   

<input type=checkbox name=07 value="大红" onclick="">大红<br/>   

<input type=checkbox name=08 value="小李" onclick="">小李<br/>
三石-gary 2011-11-25
  • 打赏
  • 举报
 回复
<input type=checkbox name=All onclick="check4()">全选(全部)<br/>
这个比较好实现
选择指定数量后checkbox不可选(变灰)javascript代码
3. 事件处理：这个示例代码展示了如何使用JavaScript来处理checkbox的事件，使得checkbox的可选性可以根据用户的选择而变化。 4.edom操作：这个示例代码展示了如何使用JavaScript来操作DOM元素，例如获取所有的input...
jquery插件实现下拉多选checkbox的效果
这样的设计非常适合于那些需要用户从一系列选项中进行多选的情况，比如设置偏好、筛选条件或者选择权限等。 要使用此插件，你需要确保已经包含了jQuery库和jQuery UI库。这两个库提供了基本的JavaScript功能和UI...
用JavaScript编程控制网页上checkbox选择状态：全选、全部取消、反选
在写一个“圳品”信息系统，需要提供按条件筛选功能，于是需要用JavaScript编程控制网页上checkbox选择状态，提供三个按钮：全选、全部取消、反向选择。
js 根据条件禁止复选框_JavaScript禁用checkbox与select的代码学习
两种禁用checkbox的方法：复制代码 代码示例:function x(){// document.all.cb1.disabled = true;// 方法一document....//方法二}JavaScript禁用checkbox-www.jquerycn.cn把方法一修改为：document.all.cb1...
js 根据条件禁止复选框_javascript复选框启用/禁用(javascript checkbox enable/disable)
Ok this is very anoying, and it is probably very simple. I want to start my web page with disabled checkboxes, and after particlar line in listbox is selected to enable those boxes....
ASP

28,404

社区成员

356,946

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章