复选框 select 全部取决于表单 ID

Question

function toggle(source) {
  checkboxes = document.getElementsByName("foo");
  for(var i=0; i < checkboxes.length; i++) {
    checkboxes[i].checked = source.checked;
  }
}

<form id="one">  
    <fieldset>  
    <legend>Select Quarter / 2017</legend> 
    <input type="checkbox" name="foo" onClick="toggle(this)" />All<br/>
    <input type="checkbox" name="foo" >Q1 2017<br>  
    <input type="checkbox" name="foo" >Q2 2017<br>  
    <input type="checkbox" name="foo" >Q3 2017<br> 
    <input type="checkbox" name="foo" >Q4 2017<br>   
    </fieldset>
</form>  

<form id="two">  
    <fieldset>  
    <legend>Select Quarter / 2017</legend> 
    <input type="checkbox" name="foo" onClick="toggle(this)" />All<br/>
    <input type="checkbox" name="foo" >Q1 2017<br>  
    <input type="checkbox" name="foo" >Q2 2017<br>  
    <input type="checkbox" name="foo" >Q3 2017<br> 
    <input type="checkbox" name="foo" >Q4 2017<br>   
    </fieldset>
</form>  

<form id="three">  
    <fieldset>  
    <legend>Select Quarter / 2017</legend> 
    <input type="checkbox" name="foo" onClick="toggle(this)" />All<br/>
    <input type="checkbox" name="foo" >Q1 2017<br>  
    <input type="checkbox" name="foo" >Q2 2017<br>  
    <input type="checkbox" name="foo" >Q3 2017<br> 
    <input type="checkbox" name="foo" >Q4 2017<br>   
    </fieldset>
</form>

我想用同一个javascript函数根据ID定位三个不同的select所有表单。有了这个功能，我现在切换所有复选框，但我想切换每个表单中的所有复选框，所以我不会同时切换所有三种表单中的所有复选框。我该怎么做？

Answer 1

function toggle(source) {
  checkboxes = document.getElementsByName(source);
  for(var i=0; i < checkboxes.length; i++) {
    checkboxes[i].checked = !checkboxes[i].checked;
  }
}

<form id="one">  
    <fieldset>  
    <legend>Select Quarter / 2017</legend> 
    <input type="button" name="foo1" onClick="toggle(this.name)" />All<br/>
    <input type="checkbox" name="foo1" >Q1 2017<br>  
    <input type="checkbox" name="foo1" >Q2 2017<br>  
    <input type="checkbox" name="foo1" >Q3 2017<br> 
    <input type="checkbox" name="foo1" >Q4 2017<br>   
    </fieldset>
</form>  

<form id="two">  
    <fieldset>  
    <legend>Select Quarter / 2017</legend> 
    <input type="button" name="foo2" onClick="toggle(this.name)" />All<br/>
    <input type="checkbox" name="foo2" >Q1 2017<br>  
    <input type="checkbox" name="foo2" >Q2 2017<br>  
    <input type="checkbox" name="foo2" >Q3 2017<br> 
    <input type="checkbox" name="foo2" >Q4 2017<br>   
    </fieldset>
</form>  

<form id="three">  
    <fieldset>  
    <legend>Select Quarter / 2017</legend> 
    <input type="button" name="foo3" onClick="toggle(this.name)" />All<br/>
    <input type="checkbox" name="foo3" >Q1 2017<br>  
    <input type="checkbox" name="foo3" >Q2 2017<br>  
    <input type="checkbox" name="foo3" >Q3 2017<br> 
    <input type="checkbox" name="foo3" >Q4 2017<br>   
    </fieldset>
</form>

我已将 "All" 的单选开关更改为按钮，希望这能全面回答您的问题

Answer 2

function toggle(source) {
debugger;
  checkboxes = document.getElementsByName(source);
  for(var i=0; i < checkboxes.length; i++) {
    checkboxes[i].checked = !checkboxes[i].checked;
  }
}

<form id="one">  
    <fieldset>  
    <legend>Select Quarter / 2017</legend> 
    <input type="checkbox" onClick="toggle('foo1')" />All<br/>
    <input type="checkbox" name="foo1" >Q1 2017<br>  
    <input type="checkbox" name="foo1" >Q2 2017<br>  
    <input type="checkbox" name="foo1" >Q3 2017<br> 
    <input type="checkbox" name="foo1" >Q4 2017<br>   
    </fieldset>
</form>  

<form id="two">  
    <fieldset>  
    <legend>Select Quarter / 2017</legend> 
    <input type="checkbox" onClick="toggle('foo2')" />All<br/>
    <input type="checkbox" name="foo2" >Q1 2017<br>  
    <input type="checkbox" name="foo2" >Q2 2017<br>  
    <input type="checkbox" name="foo2" >Q3 2017<br> 
    <input type="checkbox" name="foo2" >Q4 2017<br>   
    </fieldset>
</form>  

<form id="three">  
    <fieldset>  
    <legend>Select Quarter / 2017</legend> 
    <input type="checkbox" onchange="toggle('foo3')" />All<br/>
    <input type="checkbox" name="foo3" >Q1 2017<br>  
    <input type="checkbox" name="foo3" >Q2 2017<br>  
    <input type="checkbox" name="foo3" >Q3 2017<br> 
    <input type="checkbox" name="foo3" >Q4 2017<br>   
    </fieldset>
</form>

Answer 3

请更新下面的 javascript 函数，它将获得选中特定表单的复选框

function toggle(source) {
      var parent_form = source.parentElement.parentNode;      
      var checkboxes = parent_form.getElementsByTagName('input');
      for(var i=0; i < checkboxes.length; i++) {
        checkboxes[i].checked = source.checked;
      }
}

以身份证件形式为准

复选框 select 全部取决于表单 ID

Checkbox select all depending on form ID

javascript

forms

checkbox

fieldset

toggle