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>