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>

來源

2010-05-07 BoDiE2003

我並不很確定你想要什麼功能，但是如果你只想要將動作應用到一個集合然後給每個集合自己的類可能像父親1和孩子1和父親2和孩子2 – Jack 2010-05-07 20:40:32

也許，但有我被困住的地方，我想做的JS代碼動態，自動檢查父親和孩子ID並鏈接它們。給這些類添加一個Id號碼是個好主意。如果有人會給我一個簡短的例子，會幫助我，謝謝。 – BoDiE2003 2010-05-07 21:23:18

如果您使用jQuery而不是prototype.js，那麼現在您將得到大量答案。 – 2010-05-07 22:34:15

我不是很確定你想要的影響，但這裏有廣泛的共同原則。你需要在你的HTML中告訴你的js哪些應該影響哪些。屬性是最好的，或者是rel或id或最簡單的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給一個變量，並改變文本上添加週期，使其成爲一流的決絕最後一點。）

來源

2010-05-08 07:02:01

你能在這裏寫任何例子嗎？ – BoDiE2003 2010-05-10 13:08:43

Javascript：動態複選框（Fieldset with Father/Child複選框）

回答

相關問題