複選框列表與divs，如何顏色行和全選

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(){ 
 
\t \t $('.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>