复选框，请根据表单ID全选

Question

JS

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

我有3个表单，每个ID

<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定位三种不同的选择所有表格。现在，通过此功能，我可以切换所有复选框，但是我想切换每种形式的所有复选框，因此，我不会同时切换所有三种形式的所有复选框。我该怎么办？

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>  

我已将“全部”的单选按钮更改为按钮，希望这总体上可以回答您的问题

Answer 2

选中此复选框，因此基本上您需要传递ID并仅选中该特定复选框。

function toggle(id) {
  let selectedForm = document.getElementById(id)
  for(var i=0; i < selectedForm.elements.length; i++) {
   if(selectedForm[i].type === 'checkbox'){
     selectedForm[i].checked = true
   }
  }
}

toggle('one')

<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>