如何根据父div检查复选框？

我刚才提出了一个关于复选框的问题，但是我需要这个最后一个问题来完成。如何根据父div检查复选框？

所以我们可以说，我想有下面的代码的复选框默认设置：

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

我可以添加一个“选中”属性让他们检查，但我怎么可能使它以特定方式在哪里我可以让他们默认检查取决于一个类我可以不断改变#exampleBoxes div？例如，如果我将一个类.methodOne添加到#exampleBoxes，我希望fieldset＃field1自动检查前3个复选框。但是，如果在任何给定的点.methodOne类更改为.methodTwo，将发生不同数量的检查。

感谢任何见解！

来源

2016-07-06 Leon Freire

我不知道如果我理解正确。但是，我找不到给出'.methodOne'和选择第一个复选框3之间的任何链接？你可以有一个数组反映你已注册的每个类的每个选择。 –

无论你用什么代码来改变类，也可以调用JavaScript代码来改变复选框的状态。你能告诉我们你正在使用的代码来改变#exampleBoxes div的类吗？ –

我正在寻找最简单的方法来自动检查框，当父div更改类。简单来说。 –

可以触发类事件改为你想要做什么，例如：

绑定事件

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

;

和当改变类，则触发事件

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

来源

2016-07-06 19:26:30 xploshioOn

简单而高效！非常感谢你！ –

要检查如果一个类被添加/移除，以从另一个JavaScript的元件/ jQuery函数你可以使用MutationObserver：

开始MutationObserver
听....
停止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>

来源

2016-07-06 19:28:03 gaetanoM

如何根据父div检查复选框？

回答

相关问题