LeonVFX LeonVFX - 4 months ago 8
HTML Question

How to check checkboxes differently depending on parent div?

I just made a question about checkboxes, however I need this one last question to finish up.

So let's say I wanted to have default settings for the checkboxes in the following code:

<div id="exampleBoxes">
<p>Example 1</p>
<fieldset id="field1">
<input type="checkbox" name="forca" class="checkOne" />
<input type="checkbox" name="forca" class="checkTwo" />
<input type="checkbox" name="forca" class="checkThree" />
<input type="checkbox" name="forca" class="checkFour" />
<input type="checkbox" name="forca" class="checkFive" />
</fieldset>

<p>Example 2</p>
<fieldset id="field2">
<input type="checkbox" name="destreza" class="checkOne" />
<input type="checkbox" name="destreza" class="checkTwo" />
<input type="checkbox" name="destreza" class="checkThree" />
<input type="checkbox" name="destreza" class="checkFour" />
<input type="checkbox" name="destreza" class="checkFive" />
</fieldset>
</div>


I could add a "checked" attribute to have them checked, but how could I make it a certain way where I could make them default checked depending on a class I could keep changing on the #exampleBoxes div?

For instance, if I add a class .methodOne to #exampleBoxes, I would want fieldset#field1 to check the first 3 checkboxes automatically.
But if at any given point .methodOne class changes to .methodTwo, a different number of checks would happen.

Appreciate any insights!

Answer

you can trigger an event on class changed to do what you want, for example:

you bind an event

$("#exampleBoxes").bind('cssClassChanged', function(){ 
  if ($(this).hasClass("methodOne")){
    //do something
  }else if($(this).hasClass("methodTwo")){
    //do something else
  }
  ...... //all your conditions
})

;

and when you change the class, you trigger the event

$("#exampleBoxes").addClass('methodOne');
$("#exampleBoxes").trigger('cssClassChanged')
Comments