如何根据父 div 以不同方式检查复选框？答案

【问题标题】：How to check checkboxes differently depending on parent div?如何根据父 div 以不同方式检查复选框？
【发布时间】：2016-07-07 03:39:05
【问题描述】：

我刚刚提出了一个关于复选框的问题，但是我需要最后一个问题来完成。

假设我想在以下代码中为复选框设置默认设置：

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

我可以添加一个“checked”属性来检查它们，但是我怎样才能使它成为一种特定的方式，我可以根据我可以在#exampleBoxes div 上不断更改的类来使它们成为默认检查？

例如，如果我将类 .methodOne 添加到#exampleBoxes，我希望 fieldset#field1 自动检查前 3 个复选框。但是，如果在任何给定点 .methodOne 类更改为 .methodTwo，则会发生不同数量的检查。

欣赏任何见解！

【问题讨论】：

我不确定我是否理解正确。但是，我无法弄清楚提供.methodOne 和选择第一个复选框的 3 之间的任何联系？您可以有一个数组来反映您注册的每个班级的每个选择。
无论您使用什么代码来更改类也可以调用 javascript 代码来更改复选框的状态。你能告诉我们你用来改变#exampleBoxes div类的代码吗？
我正在寻找在父 div 更改类时自动选中复选框的最简单方法。简单来说。
您可能需要包含两个或三个真实示例来阐明最佳选择，您可以在每次更改类名时运行一个函数并评估一个适用的函数...。或者您可以将值存储在某个数据属性上，或者......有很多方法
我将有 5 个可能的类，用户可以通过单击更改这些类，我想更改选中的框。

标签： javascript jquery html css checkbox

【解决方案1】：

您可以触发更改类的事件以执行您想要的操作，例如：

你绑定一个事件

$("#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')

【讨论】：

简单高效！非常感谢！

【解决方案2】：

要检查一个类是否从另一个 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>

【讨论】：