CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
Leon Freire
Leon Freire

Reputation: 818

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!

Upvotes: 2

Views: 70

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

To check if a class is added/removed to an element from another javascript / jQuery function you may use MutationObserver:

  • Start MutationObserver
  • listen....
  • Stop MutationObserver

var observer = null;

$(function () {
  $('#exampleBoxes').on('DOMAttrModified', function (e) {
    var a = this;
  });
  $('#btn1').on('click', function(e) {
    $('#exampleBoxes').toggleClass('methodOne');
  });
  $('#btn2').on('click', function(e) {
    $('#exampleBoxes').toggleClass('methodTwo');
  });
  $('#btn3').on('click', function(e) {
    if (observer != null) {
      return;
    }
    observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.attributeName === "class") {
          var newVal = $(mutation.target).prop(mutation.attributeName);
          alert('DIV exampleBoxes changed class to: ' + newVal);
          
          // Instead of alert call your function according
          // to the value of newVal (class value)
          
          
        }
      });
    });
    var config = { attributes: true, childList: true, characterData: true };
    
    // observe changes for exampleBoxes DIV element
    observer.observe($('#exampleBoxes')[0], config);
  });
  $('#btn4').on('click', function(e) {
    observer.disconnect();
    observer = null;
  });
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<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>
<button id="btn1">Toggle class methodOne </button>
<button id="btn2">Toggle class methodTwo </button>
<button id="btn3">Start  MutationObserver</button>
<button id="btn4">Stop  MutationObserver</button>

Upvotes: 1

xploshioOn
xploshioOn

Reputation: 4115

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

Upvotes: 1

Related Questions