檢查/取消選中複選框，通過單擊他們的父divs問題 - jQuery

Question

以下代碼行通過單擊其父div檢查/取消選中複選框。代碼工作正常，除了一個問題。問題是當我們點擊複選框本身時，它不會被檢查。如果已經通過點擊複選框文本或其父文件夾來檢查它，那麼它不會通過單擊複選框本身而被取消選中。如何解決這個問題？當我點擊複選框及其標籤文本和整個父div的寬度時，我想要代碼工作。這裏是demo。

jQuery的：

$(document).ready(function(){ 
    // Check/uncheck checkboxes clicking on its parent div 
    $(".checkbox_option").click(function(){ 
     var chk = $(this).find("input[type='checkbox']"); 
     if(chk.prop("checked") == false) 
     { 
      chk.prop("checked", true); 
     } 
     else 
     { 
      chk.prop("checked", false); 
     } 
    }); 
}); 

CSS：

#checkbox_options { 
    border:2px solid #b8b8b8; 
    height:200px; 
    margin:100px auto; 
    overflow:scroll; 
    width:500px; 
} 

.checkbox_option { 
    padding:2px 5px; 
} 

.checkbox_option input[type="checkbox"] { 
    margin-right:5px; 
} 

.checkbox_option:hover { 
    background-color:#464646; 
    color:#fff; 
} 

HTML：

<div id="checkbox_options"> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="1" id="cat_1" /> 
     <label for="cat_1">Category 1</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="2" id="cat_2" /> 
     <label for="cat_2">Category 2</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="3" id="cat_3" /> 
     <label for="cat_3">Category 3</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="4" id="cat_4" /> 
     <label for="cat_4">Category 4</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="5" id="cat_5" /> 
     <label for="cat_5">Category 5</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="6" id="cat_6" /> 
     <label for="cat_6">Category 6</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="7" id="cat_7" /> 
     <label for="cat_7">Category 7</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="8" id="cat_8" /> 
     <label for="cat_8">Category 8</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="9" id="cat_9" /> 
     <label for="cat_9">Category 9</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="10" id="cat_10" /> 
     <label for="cat_10">Category 10</label> 
    </div> 

</div> 

Answer 1

您可以檢查更新的代碼這裏jsfiddle.net/bharatsing/Luyj10vg/

$(document).ready(function(){ 
    $(".checkbox_option input[type='checkbox'],.checkbox_option label").on('click', 
    function(e){ 
     e.stopPropagation(); 
    }); 

    // Check/uncheck checkboxes clicking on its parent div 
    $(".checkbox_option").click(function(){    
     var chk = $(this).find("input[type='checkbox']"); 
     if(chk.is(":checked") == false) 
     { 
      chk.prop("checked", true); 
     } 
     else 
     { 
      chk.prop("checked", false); 
     } 
    }); 
}); 

Answer 2

您好我想這是因爲當你點擊複選框會觸發兩次。 如果你想要它的工作，你需要停止複選框點擊傳播。

$(document).ready(function(){ 
    // Check/uncheck checkboxes clicking on its parent div 
    $(".checkbox_option").click(function(event){ 
     var chk = $(this).find("input[type='checkbox']"); 
     if(chk.prop("checked") == false) 
     { 
      chk.prop("checked", true); 
     } 
     else 
     { 
      chk.prop("checked", false); 
     } 
    }); 
$('.checkbox_option input[type="checkbox"]').click(function(event){ 
     event.stopPropagation(); 
    }); 
}); 

here is working demo

但更好的方法來處理這個例子是CSS。您可以設置標籤標籤的樣式以包含整行。

Answer 3

這裏是CSS工作示例：

jsFiddle

<div id="checkbox_options"> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="1" id="cat_1" /> 
     <label for="cat_1">Category 1</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="2" id="cat_2" /> 
     <label for="cat_2">Category 2</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="3" id="cat_3" /> 
     <label for="cat_3">Category 3</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="4" id="cat_4" /> 
     <label for="cat_4">Category 4</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="5" id="cat_5" /> 
     <label for="cat_5">Category 5</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="6" id="cat_6" /> 
     <label for="cat_6">Category 6</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="7" id="cat_7" /> 
     <label for="cat_7">Category 7</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="8" id="cat_8" /> 
     <label for="cat_8">Category 8</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="9" id="cat_9" /> 
     <label for="cat_9">Category 9</label> 
    </div> 

    <div class="checkbox_option"> 
     <input type="checkbox" name="category[]" value="10" id="cat_10" /> 
     <label for="cat_10">Category 10</label> 
    </div> 

</div> 

CSS：

#checkbox_options { 
    border:2px solid #b8b8b8; 
    height:200px; 
    margin:100px auto; 
    overflow:scroll; 
    width:500px; 
} 

.checkbox_option { 
    padding:2px 5px; 
} 

.checkbox_option input[type="checkbox"] { 
    margin-right:5px; 
    width:13px; 
    display:block; 
    float:left; 
} 

.checkbox_option:hover { 
    background-color:#464646; 
    color:#fff; 
} 
.checkbox_option label{ 
    width:calc(100% - 22px); 
    display: inline-block; 
}