Javascript:动态复选框(Fieldset with Father/Child复选框)

问题描述:

我在这里遇到问题,当我选择任何“父”复选框时,所有子复选框都启用或禁用。所以我需要每个父亲复选框来影响它自己的子字段集。有人可以帮我解决这个问题。Javascript:动态复选框(Fieldset with Father/Child复选框)

谢谢

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<title>toggle disabled</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style type="text/css"> 
.cssDisabled { color: #ccc; } 
</style> 

<script src="http://prototypejs.org/assets/2009/8/31/prototype.js" type="text/javascript"> </script> 
<script type="text/javascript"> 
Event.observe(window, 'load', function(){ 
    // for all items in the group_first class 
    $$('.father').each(function(chk1){ 
     // watch for clicks 
     chk1.observe('click', function(evt){ 
      dynamicCheckbox(); 
     }); 
    dynamicCheckbox(); 
    }); 
}); 
function dynamicCheckbox(){ 
    // count how many of group_first are checked, 
      // doEnable true if any are checked 
    var doEnable = ($$('.father:checked').length > 0) ? true : false; 
    // for each in group_second, enable the checkbox, and 
      // remove the cssDisabled class from the parent label 
    $$('.child').each(function(item){ 
     if (doEnable) { 
      item.enable().up('label').removeClassName('cssDisabled'); 
     } else { 
      item.disable().up('label').addClassName('cssDisabled'); 
     } 
    }); 
}; 
</script> 

</head> 
<body> 
    <fieldset> 
    <legend>First Group</legend> 
    <label><input type="checkbox" value="1" class="father" />Check box 1</label><br /> 
    <label><input type="checkbox" value="2" class="father" checked/>Check box 2</label> 
</fieldset> 

<fieldset> 
    <legend>Second Group</legend> 
    <label class="cssDisabled"><input type="checkbox" value="x" class="child" disabled="disabled" />Check box x</label><br /> 
    <label class="cssDisabled"><input type="checkbox" value="y" class="child" disabled="disabled" />Check box y</label><br /> 
    <label class="cssDisabled"><input type="checkbox" value="z" class="child" disabled="disabled" />Check box z</label> 
</fieldset> 
    <fieldset> 
    <legend>First Group</legend> 
    <label><input type="checkbox" value="3" class="father" />Check box 1</label><br /> 
</fieldset> 

<fieldset> 
    <legend>Second Group</legend> 
    <label class="cssDisabled"><input type="checkbox" value="x" class="child" disabled="disabled" />Check box x</label><br /> 
    <label class="cssDisabled"><input type="checkbox" value="y" class="child" disabled="disabled" />Check box y</label><br /> 
    <label class="cssDisabled"><input type="checkbox" value="z" class="child" disabled="disabled" />Check box z</label> 
</fieldset> 
</body> 
</html> 
+0

我并不很确定你想要什么功能,但是如果你只想要将动作应用到一个集合然后给每个集合自己的类可能像父亲1和孩子1和父亲2和孩子2 – Jack 2010-05-07 20:40:32

+0

也许,但有我被困住的地方,我想做的JS代码动态,自动检查父亲和孩子ID并链接它们。给这些类添加一个Id号码是个好主意。如果有人会给我一个简短的例子,会帮助我,谢谢。 – BoDiE2003 2010-05-07 21:23:18

+1

如果您使用jQuery而不是prototype.js,那么现在您将得到大量答案。 – 2010-05-07 22:34:15

我不是很确定你想要的影响,但这里有广泛的共同原则。你需要在你的HTML中告诉你的js哪些应该影响哪些。属性是最好的,或者是relid或最简单的class

因此,在.father之间给每个.father一个唯一的ID。

<input type="checkbox" value="2" class="father" id="foo"> 
<input type="checkbox" value="3" class="father" id="bar"> 

然后给孩子对应/相同的类。

<input type="checkbox" value="1" class="child foo"> 
<input type="checkbox" value="2" class="child bar"> 

(靠,你不使用XHTML,所以你不需要尾随斜线。的方式)

我不知道原型,但你需要做的是什么,对于每个.father,抓住id#foo#bar以上),并寻找具有类.child要么.foo.bar,取决于所有复选框。 (您可以通过存储id给一个变量,并改变文本上添加周期,使其成为一流的决绝最后一点。)

+0

你能在这里写任何例子吗? – BoDiE2003 2010-05-10 13:08:43