javascript - 嗨，我需要一个建议。如果我单击一个包含某些值的复选框..该值引用其他复选框

Question

您好，我需要一个建议。如果我单击一个包含某些值的复选框。该值引用其他复选框。如果我单击第一个复选框，然后与选定的复选框值相关，相同值的复选框将被激活或其他复选框将被停用。

$(document).on("click", ".sizecheck", function(event) {
  var value1 = $(this).attr('attrb');
  var value2 = value1.split(',');

  for (var i = 0; i < value2.length; i++) {
    $(".coloridchange").each(function() {
      if ($(this).attr('href') == value2[i]) {
        $(this).addClass('active');
      }
    });
  }
});

.active {
  color: red!important;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" attrb="1,2" class="sizecheck" name="size">

<input type="checkbox" attrb="4,5" class="sizecheck" name="size">

<br/> check box active state
<li class="coloridchange" href="1">
  <input type="checkbox" autocomplete="off" class="hidden" value="1" id="item0" name="color">1</li>

<li class="coloridchange" href="2">
  <input type="checkbox" autocomplete="off" class="hidden" value="2" id="item0" name="color">2</li>

<li class="coloridchange" href="4">
  <input type="checkbox" autocomplete="off" class="hidden" value="4" id="item0" name="color">4</li>

<li class="coloridchange" href="5">
  <input type="checkbox" autocomplete="off" class="hidden" value="5" id="item0" name="color">5</li>

Answer 1

你可以尝试这样的事情:

• 点击时，检查当前复选框是否被选中。如果是，将其值设置为 attrb 属性。如果不是，请将其设置为空白。
• 现在遍历所有 li 并将 href(data-id 在下面的例子中)保存在一个变量。
• 现在使用 .toggleClass('className', expression) 来添加/删除 类。 true 添加，false 删除。

示例:

$(document).on("click", ".sizecheck", function(event) {
  var value1 = $(this).is(":checked")? $(this).attr('attrb') : "";
  $('li.coloridchange').each(function(){
    var href = $(this).data('id')
    $(this).toggleClass('active', value1.indexOf(href)>-1)
  });
});

.active {
  color: red!important;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" attrb="1,2" class="sizecheck" name="size">

<input type="checkbox" attrb="4,5" class="sizecheck" name="size">

<br/> check box active state
<li class="coloridchange" data-id="1">
  <input type="checkbox" autocomplete="off" class="hidden" value="1" name="color">1</li>

<li class="coloridchange" data-id="2">
  <input type="checkbox" autocomplete="off" class="hidden" value="2" name="color">2</li>

<li class="coloridchange" data-id="4">
  <input type="checkbox" autocomplete="off" class="hidden" value="4" name="color">4</li>

<li class="coloridchange" data-id="5">
  <input type="checkbox" autocomplete="off" class="hidden" value="5" name="color">5</li>