Флажок выбрать все в зависимости от идентификатора формы - PullRequest
Новая
       104

Флажок выбрать все в зависимости от идентификатора формы

0 голосов
/ 13 января 2020 

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, чтобы настроить таргетинг на три различных варианта выбора всех форм в соответствии с идентификатором. С помощью этой функции я теперь переключаю все флажки, но я хочу переключить все флажки в каждой форме, поэтому я не переключаю все флажки во всех трех формах одновременно. Как я могу это сделать?

Ответы [ 3 ]

4 голосов
/ 13 января 2020

Пожалуйста, обновите ниже функцию javascript, она получит указанную c форму выбранной галочкой 

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

Это будет зависеть от формы ID.

1 голос
/ 13 января 2020 

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>
1 голос
/ 13 января 2020 

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>

Я переключил переключатель «Все» на радио, надеюсь, это ответит на ваш вопрос в целом

...