求javascript checkbox 选中事件代码
我想要代码是在控制编辑状态下：
如果先点击大项A中的bigclassauthorize为true的话，其3个小项可为true可为false；
如果先点击大项A中的bigclassauthorize为false的话，其3个小项全为false；
只要任何小项为true的话，大项A的bigclassauthorize为true；
如果先点击3个小项的smallclassauthorize都为false的话，大项A的bigclassauthorize为false；
不满足以上条件的话，ALERT“错误”~~
分一定给大人们~~请帮忙 很急~~
因为俺是初学者，所以才不会写嘛嘻嘻 ~~“tz6060996”的答案很接近了，但是我试过了你的代码，结果点第二个大项里面的小项后，第一个大项的bigclassauthorize也为True了，俺是动态的，所以只是列了一个大项和一个小项出来的~~也就是说我的大项和小项都只有一个ID而已，麻烦再改改嘛“tz6060996” 展开
首先通过getElementById或其它方式获得这些对象obj，然后判断obj.checked = true或false就可以了。
例:
<input id='bigclassauthorize' type='checkbox' onclick='testClickBigCheckBox()'/>
<input id='smallclassauthorize1' type='checkbox'/>
<input id='smallclassauthorize2' type='checkbox'/>
....
function testClickBigCheckBox(){
var big = document.getElementById('bigclassauthorize');
var small1 = document.getElementById('smallclassauthorize1');
var small2 = document.getElementById('smallclassauthorize2');
if(big.checked == true){
small1.checked = true;
small2.checked = true;
}else{
small1.checked = false;
small2.checked = false;
}
}
代码可以精简或者封装,这里只是简单的描述一下基本做法，以上是大项被选中的事件处理，小项的原理差不多。
扩展资料：
思路：获取checkbox对象，根据value属性设置checkbox的checked属性（true为选中，false为取消选中）。下面实例演示——根据文本框的制定值设置复选框的选中项：
1、HTML结构
<input name="test" type="checkbox" value="1" />item-1
<input name="test" type="checkbox" value="2" />item-2
<input name="test" type="checkbox" value="3" />item-3<br>
<input name="test" type="checkbox" value="4" />item-4
<input name="test" type="checkbox" value="5" />item-5<br>
<input type="text" id="val"><input type="button" value="确定" onclick="fun()">
2、javascript代码
function fun(){
var val = document.getElementById("val").value.split(",");
var boxes = document.getElementsByName("test");
for(i=0;i<boxes.length;i++){
for(j=0;j<val.length;j++){
if(boxes[i].value == val[j]){
boxes[i].checked = true;
break
}
}
}
}
.aaa
{
border: 1px hidden #0000FF;
width: 100px;
height: 60px;
background-color: #cccccc;
}
</style>
<input name="bigclassauthorize" id="bigclassauthorize" type="checkbox" onclick="bigChange(this)"/>大类
<div class="aaa">
<input name="smallclassauthorize" type="checkbox" onclick="smallChange(this)" value="小类一"/>小类一<br />
<input name="smallclassauthorize" type="checkbox" onclick="smallChange(this)" value="小类二"/>小类二<br />
<input name="smallclassauthorize" type="checkbox" onclick="smallChange(this)" value="小类三"/>小类三
</div>
<script language="javascript" type="text/javascript">
function bigChange(obj) {
if (obj.checked == false) {
var smObj = document.getElementsByName("smallclassauthorize");
for (var i = 0; i < smObj.length; i++)
smObj[i].checked = false;
}
}
function smallChange(obj) {
var smObj = document.getElementsByName("smallclassauthorize");
var bigObj = document.getElementById("bigclassauthorize");
if (obj.checked == true)
bigObj.checked = true;
else {
b = true;
for (var i = 0; i < smObj.length; i++) {
if (smObj[i].checked == true)
b = false;
}
if (b == true)
bigObj.checked = false;
}
}
</script>
例:
<input id='bigclassauthorize' type='checkbox' onclick='testClickBigCheckBox()'/>
<input id='smallclassauthorize1' type='checkbox'/>
<input id='smallclassauthorize2' type='checkbox'/>
....
function testClickBigCheckBox(){
var big = document.getElementById('bigclassauthorize');
var small1 = document.getElementById('smallclassauthorize1');
var small2 = document.getElementById('smallclassauthorize2');
if(big.checked == true){
small1.checked = true;
small2.checked = true;
}else{
small1.checked = false;
small2.checked = false;
}
}
代码可以精简或者封装,这里只是简单的描述一下基本做法.
以上是大项被选中的事件处理.
小项的原理差不多，判断稍微多一点.慢慢写锻炼自己动手操作能力.
- -//, 都一样, 动态的话完全不能这么写 .
得用循环判断. 这里只能给你思路 .
另外想知道这样的效果,去网上搜js treeview .写的好的菜单很多的.
