javascript - 带有div的复选框列表，如何为行着色并全选

Question

新手和第一个问题，所以要温柔!我找到了 http://jsfiddle.net/MJVKB/169/来自上一个很好用的问题。我正在尝试找到一种方法来添加“全选/取消全选复选框”。我可以让多项选择工作，但无法让所有颜色突出显示。

有人可以帮我添加正确的代码来执行此操作吗？任何帮助真的很感激。谢谢

jQuery.fn.multiselect = function() {
  $(this).each(function() {
    var checkboxes = $(this).find("input:checkbox");
    checkboxes.each(function() {
      var checkbox = $(this);
      // Highlight pre-selected checkboxes
      if (checkbox.attr("checked"))
        checkbox.parent().addClass("multiselect-on");

      // Highlight checkboxes that the user selects
      checkbox.click(function() {
        if (checkbox.attr("checked"))
          checkbox.parent().addClass("multiselect-on");
        else
          checkbox.parent().removeClass("multiselect-on");
        alert($("option:selected"));
      });
    });
  });
};

$(function() {
  $(".multiselect").multiselect();
});

.multiselect {
  width:20em;
  height:15em;
  border:solid 1px #c0c0c0;
  overflow:auto;
}

.multiselect label {
  display:block;
}

.multiselect-on {
  color:white;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
  <label><input type="checkbox" name="option[]" value="1" />Green</label>
  <label><input type="checkbox" name="option[]" value="2" />Red</label>
  <label><input type="checkbox" name="option[]" value="6" />Black</label>
  <label><input type="checkbox" name="option[]" value="7" />White</label>
</div>

Answer 1

尝试使用 .prop() 和 .change() 方法来代替

.prop() documentation

jQuery.fn.multiselect = function() {
    $(this).each(function() {
        var checkboxes = $(this).find("input:checkbox");
        checkboxes.each(function() {
            var checkbox = $(this);
            // Highlight pre-selected checkboxes
            if (checkbox.prop("checked"))
                checkbox.parent().addClass("multiselect-on");
 
            // Highlight checkboxes that the user selects
            checkbox.change(function() {
                if (checkbox.prop("checked"))
                    checkbox.parent().addClass("multiselect-on");
                else
                    checkbox.parent().removeClass("multiselect-on");
                // alert($("option:selected"));
            });
        });
    });
};

$(function() {
     $(".multiselect").multiselect();
     // Select all
     $('[name="all"]').change(function(){
		$('.multiselect').find("input:checkbox").prop('checked', $(this).prop('checked')).change();
     });
});

.multiselect {
    width:20em;
    height:15em;
    border:solid 1px #c0c0c0;
    overflow:auto;
}
 
.multiselect label {
    display:block;
}
 
.multiselect-on {
    color:#ffffff;
    background-color:#000099;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
    <label><input type="checkbox" name="option[]" value="1" />Green</label>
    <label><input type="checkbox" name="option[]" value="2" />Red</label>
    <label><input type="checkbox" name="option[]" value="3" />Blue</label>
    <label><input type="checkbox" name="option[]" value="4" />Orange</label>
    <label><input type="checkbox" name="option[]" value="5" />Purple</label>
    <label><input type="checkbox" name="option[]" value="6" />Black</label>
    <label><input type="checkbox" name="option[]" value="7" />White</label>
</div>
<label><input type="checkbox" name="all" value="1" />Select All</label>