0
votes

Case à cocher Sélectionnez tout en fonction de l'identifiant de formulaire

<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 checkbox toggle forms fieldset

0 commentaires

3 Réponses :

1
votes

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

1 commentaires

Oui, mais la solution ci-dessus consiste à modifier les noms de la case HTML. Veuillez vérifier ci-dessous la réponse avec simplement mettre à jour le code JavaScript sur la question pertinente pour votre question.

0
votes

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

La question est liée à obtenir le formulaire basé sur l'ID sélectionné, vous avez modifié ici les noms de la boîte à cocher.

5
votes

Veuillez mettre à jour la fonction de JavaScript, cochez la case Cochez la case SPÉCIFIQUE

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

0 commentaires