Aktivieren/Deaktivieren Sie Kontrollkästchen, indem Sie auf ihre Eltern divs Problem - jQuery

Question

Die folgenden Zeilen des Codes aktivieren/deaktivieren Sie Kontrollkästchen, indem Sie auf ihre Eltern div. Der Code funktioniert gut, außer einem Problem. Das Problem ist, wenn wir auf das Kontrollkästchen klicken, dann wird es nicht überprüft. Und wenn es bereits durch einen Klick auf den Checkbox-Text oder das Eltern-Div aktiviert ist, wird es nicht deaktiviert, wenn Sie auf das Kontrollkästchen klicken. Wie behebe ich dieses Problem? Ich möchte, dass Code funktioniert, wenn ich auf das Kontrollkästchen und seinen Beschriftungstext und die Breite des gesamten Elternteils klicke. Hier ist die 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

können Sie aktualisiert Prüfcodes hier 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

Hallo, ich denke, es ist da, wenn Sie auf Kontrollkästchen klicken, um es zweimal auslöst. Wenn Sie möchten, dass Sie arbeiten, müssen Sie die Weiterleitung bei Checkbox-Klick stoppen.

$(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

aber der bessere Weg, um dieses Beispiel zu handhaben ist von CSS. Sie können Ihre Label-Tags so gestalten, dass sie die ganze Zeile enthalten.

Answer 3

Hier ist ein funktionierendes Beispiel mit 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; 
}