Question

我有一个包含多个复选框的表单，我希望得到这种行为：

选中复选框后，“my_class”父div的背景会发生变化
顶部按钮可以选中或取消选中所有复选框
点击按钮时，所有“my_class”div的背景都会改变

CSS，HTML和JS代码

$(document).ready(function() {
  $(".check_all:button").toggle(function() {
    $("input:checkbox").attr("checked", "checked");
    $("input:checkbox").closest(".my_class").addClass("checked_bg");
    $(this).val("Uncheck All")
  },
  function() {
    $("input:checkbox").removeAttr("checked");
    $("input:checkbox").closest(".my_class").removeClass("checked_bg");
    $(this).val("Check All");
  });

  $("input:checkbox").on("change", function() {
    var that = this;
    $(this).closest(".my_class").css("background-color", function() {
       return that.checked ? "#bcfab9" : "#ffffff";
    });
  });
});

.checked_bg {
  background-color: #bcfab9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="check_all" value="Check All">
<br>
<br>
<label for="checkbox_1">
      <div class="my_class">
        <input type="checkbox" id="checkbox_1" name="Box[]" value="1">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div>Duis sit amet malesuada ligula.</div>
      </div>
    </label>

<label for="checkbox_2">
      <div class="my_class">
        <input type="checkbox" id="checkbox_2" name="Box[]" value="2">
        <div>Quisque magna est, blandit ac laoreet eu, consectetur eget turpis.</div>
        <div>Fusce nisi tortor, suscipit sed luctus eu, varius eget massa.</div>
      </div>
    </label>

测试页面：（JSFiddle）[https://jsfiddle.net/o4h97eae/18/]

它不起作用，请你帮忙解决这个问题吗？

Answer 1

我发现了一些问题：

您无法将所有内容都放在label。
toggle会立即隐藏button，因为它必须要做的事情。您需要一个click事件监听器和一些决定，该怎么做。
要选中相应的框，您需要使用.prop()代替.attr()
如果您想触发change的{{1}}事件，则需要手动触发
请注意，该按钮添加了一个类，checkboxes事件添加了change。这可能有一种暴力行为。如果您想在background-color之后防止背景颜色持续存在，您还需要删除uncheck all，或者手动触发事件，如前所述。

background-color

$(document).ready(function() {
  $(".check_all:button").on('click', function() {
    var checkboxes = $("input:checkbox");

    if($(this).val() === "Check All") {
      checkboxes.prop("checked", true).closest(".my_class").addClass("checked_bg");
      $(this).val("Uncheck All")
    }
    else {
      checkboxes.prop("checked", false).closest(".my_class").removeClass("checked_bg");
      $(this).val("Check All");
    }
  });

  $("input:checkbox").on("change", function() {
    var that = this;
    $(this).closest(".my_class").css("background-color", function() {
      return that.checked ? "#bcfab9" : "#ffffff";
    });
  });
});

.checked_bg {
  background-color: #bcfab9;
}

一个例子，它如何更好/更有意义，甚至更少的代码开销：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" class="check_all" value="Check All">

<br /> <br />

<label for="checkbox_1">checkbox_1</label>
<div class="my_class">
  <input type="checkbox" id="checkbox_1" name="Box[]" value="1">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div>Duis sit amet malesuada ligula.</div>
</div>


<label for="checkbox_2">checkbox_2</label>
<div class="my_class">
  <input type="checkbox" id="checkbox_2" name="Box[]" value="2">
  <div>Quisque magna est, blandit ac laoreet eu, consectetur eget turpis.</div>
  <div>Fusce nisi tortor, suscipit sed luctus eu, varius eget massa.</div>
</div>

jQuery(function($) {
  $(".check_all").on("click", function() {
    var check = $(this).val() === "Check All";
    $("input:checkbox").prop("checked", check).trigger('change');
    $(this).val(check ? "Uncheck All" : "Check All")
  });

  $("input:checkbox").on("change", function() {
    $(this).closest(".my_class").toggleClass("checked_bg", $(this).prop("checked"));
  });
});

.checked_bg {
  background-color: #bcfab9;
}

JQuery - 多个复选框操作

1 个答案: