以下代码行通过单击其父 div 来选中/取消选中复选框。除了一个问题之外,该代码工作正常。问题是当我们单击复选框本身时,它不会被选中。如果已经通过单击复选框文本或其父 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>
最佳答案
您可以在此处查看更新的代码 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);
}
});
});
关于jquery - 通过单击其父级 div 来选中/取消选中复选框问题 - jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41407721/