Jquery：使用 JQuery 处理复选框单击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2642988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 13:56:02 来源:igfitidea点击:
Jquery: Handling Checkbox Click Event with JQuery
提问by wcolbert
I can't figure out what is going on here. I have some nested lists of checkboxes that I would like to check when the parent is checked. More importantly, I can't even get the alert to show up. It's as if the click event is not firing. Any ideas?
我无法弄清楚这里发生了什么。我有一些嵌套的复选框列表，我想在检查父项时检查它们。更重要的是，我什至无法让警报出现。就好像点击事件没有触发一样。有任何想法吗？
<script type="text/javascript">
$(document).ready(function() {
$("#part_mapper_list input[type=checkbox]").click(function(){
alert("clicked");
if ($(this).attr("checked") == "checked"){
$(this + " input").attr("checked") = "checked";
} else {
$(this + " input").attr("checked") = "";
}
});
}
</script>
<link rel="stylesheet" href="style.css">
<div>
<ul id="part_mapper_list">
<?php
$makes = array("Audi", "BMW", "Mini", "Porsche", "Volkswagen");
$generations = array("Generation 1", "Generation 2", "Generation 3", "Generation 4", "Generation 5");
$modelclusters = array("Model Cluster 1", "Model Cluster 2", "Model Cluster 3", "Model Cluster 4", "Model Cluster 5");
$cars = array("Car 1", "Car 2", "Car 3", "Car 4", "Car 5");
foreach($makes as $mappermake){
echo "<li id=\"" . $mappermake . "\" class=\"mapper_make\">+<input type=\"checkbox\" name=\"mapper_make\" value=\"" . $mappermake . "\">" . $mappermake . "</input><ul>";
foreach($generations as $mappergen){
echo "<li id=\"" . $mappergen . "\" class=\"mapper_gen\">+<input type=\"checkbox\" name=\"mapper_gen\" value=\"" . $mappergen . "\">" . $mappergen . "</input><ul>";
foreach($modelclusters as $mappermodelcluster){
echo "<li id=\"" . $mappermodelcluster . "\" class=\"mapper_modelcluster\">+<input type=\"checkbox\" name=\"mapper_modelcluster\" value=\"" . $mappermodelcluster . "\">" . $mappermodelcluster . "</input><ul>";
foreach($cars as $mappercar){
echo "<li id=\"" . $mappercar . "\" class=\"mapper_car\"><input type=\"checkbox\" name=\"mapper_car\" value=\"" . $mappercar . "\">" . $mappercar . "</input></li>";
}
echo "</ul></li>";
}
echo "</ul></li>";
}
echo "</ul></li>";
}
?>
<input id="submit_mapping" type="submit">
</div>
回答by GlenCrawford
You're missing a closing bracket ) at the end of your code sample. Is that a copy and paste error or is that the case in your code?
您在代码示例的末尾缺少一个右括号 )。这是复制和粘贴错误还是您的代码中的情况？
$(document).ready(function() {
$("#part_mapper_list input[type=checkbox]").click(function(){
alert("clicked");
if ($(this).attr("checked") == "checked"){
$(this + " input").attr("checked") = "checked";
} else {
$(this + " input").attr("checked") = "";
}
});
});
Edit for below comment:I'm not entirely sure if I understand what you're trying to do, but try this untestedcode.
编辑以下评论：我不完全确定我是否理解你想要做什么，但试试这个未经测试的代码。
$(document).ready(function() {
$("#part_mapper_list input[type=checkbox]").click(function() {
$("#" + $(this).val() + " input[type=checkbox]").attr("checked", $(this).attr("checked"));
});
});
回答by jerjer
If the alert isn't firing there might problem with our HTML markup, please verify it is well-formed and that you properly nested tags.
如果警报未触发，则可能是我们的 HTML 标记有问题，请验证它的格式是否正确以及您是否正确嵌套了标签。
I would be much helpful if you can as well post your HTML code, for us to inspect the problem.
如果您也可以发布您的 HTML 代码，以便我们检查问题，我会很有帮助。
$(document).ready(function() {
$("#part_mapper_list :checkbox").click(function(){
alert("clicked");
if (this.checked){
//$(this + " input").attr("checked") = "checked";
} else {
//$(this + " input").attr("checked") = "";
}
});
});
if the markup are correct and valid, directly access the checked propery of the rawdom object instead of wrapping it with jquery to minimize overhead.
如果标记正确且有效，则直接访问 rawdom 对象的检查属性，而不是用 jquery 包装它以最小化开销。
回答by Rajiv
Try This:
尝试这个：
$(document).ready(function() {
$("#part_mapper_list :checkbox").click(function(){
$(this).find(":checkbox").attr("checked", this.checked);
});
)};
回答by SACHIN MOHTE
try thischeck multiple checkboxes with jquery
check all check boxes with single click
on click for multiple checkbox
select all checkbox with onclick event
select all check box with single checkbox select
HTML CODE
试试这个用jquery检查多个复选框
单击
单击多个复选框
检查
所有复选框用onclick事件
选择所有复选框用单个复选框选择所有复选框选择
HTML代码
<div class="field-type-list-boolean field-name-field-select-all field-widget-options-onoff form-wrapper" id="edit-field-select-all"><div class="form-item form-type-checkbox form-item-field-select-all-und">
<input type="checkbox" id="edit-field-select-all-und" name="field_select_all[und]" value="1" class="form-checkbox"> <label class="option" for="edit-field-select-all-und">Select All </label>
</div>
</div>
<div class="field-type-list-boolean field-name-field-select-none field-widget-options-onoff form-wrapper" id="edit-field-select-none"><div class="form-item form-type-checkbox form-item-field-select-none-und">
<input type="checkbox" id="edit-field-select-none-und" name="field_select_none[und]" value="1" class="form-checkbox"> <label class="option" for="edit-field-select-none-und">Select None </label>
</div>
</div>
<div id="edit-field-culture-und" class="form-checkboxes"><table class="multicolumncheckboxesradios-table"><tbody><tr class="odd"><td class="multicolumncheckboxesradios-column-first multicolumncheckboxesradios-column"> </td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-4">
<input type="checkbox" id="edit-field-culture-und-4" name="field_culture[und][4]" value="4" class="form-checkbox"> <label class="option" for="edit-field-culture-und-4">Austria </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-7">
<input type="checkbox" id="edit-field-culture-und-7" name="field_culture[und][7]" value="7" class="form-checkbox"> <label class="option" for="edit-field-culture-und-7">Croatia </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-13">
<input type="checkbox" id="edit-field-culture-und-13" name="field_culture[und][13]" value="13" class="form-checkbox"> <label class="option" for="edit-field-culture-und-13">Finland (English) </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-17">
<input type="checkbox" id="edit-field-culture-und-17" name="field_culture[und][17]" value="17" class="form-checkbox"> <label class="option" for="edit-field-culture-und-17">Hungary </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-16">
<input type="checkbox" id="edit-field-culture-und-16" name="field_culture[und][16]" value="16" class="form-checkbox"> <label class="option" for="edit-field-culture-und-16">Latvia </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-20">
<input type="checkbox" id="edit-field-culture-und-20" name="field_culture[und][20]" value="20" class="form-checkbox"> <label class="option" for="edit-field-culture-und-20">Norway (Norwegian) </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-23">
<input type="checkbox" id="edit-field-culture-und-23" name="field_culture[und][23]" value="23" class="form-checkbox"> <label class="option" for="edit-field-culture-und-23">Slovakia (English) </label>
</div>
</td><td class="multicolumncheckboxesradios-column multicolumncheckboxesradios-column-last"><div class="form-item form-type-checkbox form-item-field-culture-und-24">
<input type="checkbox" id="edit-field-culture-und-24" name="field_culture[und][24]" value="24" class="form-checkbox"> <label class="option" for="edit-field-culture-und-24">Sweden (Swedish) </label>
</div>
</td></tr><tr class="even"><td class="multicolumncheckboxesradios-column-first multicolumncheckboxesradios-column"> </td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-6">
<input type="checkbox" id="edit-field-culture-und-6" name="field_culture[und][6]" value="6" class="form-checkbox"> <label class="option" for="edit-field-culture-und-6">Belgium (Dutch) </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-8">
<input type="checkbox" id="edit-field-culture-und-8" name="field_culture[und][8]" value="8" class="form-checkbox"> <label class="option" for="edit-field-culture-und-8">Czech Republic </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-14">
<input type="checkbox" id="edit-field-culture-und-14" name="field_culture[und][14]" value="14" class="form-checkbox"> <label class="option" for="edit-field-culture-und-14">France </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-3">
<input type="checkbox" id="edit-field-culture-und-3" name="field_culture[und][3]" value="3" class="form-checkbox"> <label class="option" for="edit-field-culture-und-3">Ireland </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-18">
<input type="checkbox" id="edit-field-culture-und-18" name="field_culture[und][18]" value="18" class="form-checkbox"> <label class="option" for="edit-field-culture-und-18">Malta </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-21">
<input type="checkbox" id="edit-field-culture-und-21" name="field_culture[und][21]" value="21" class="form-checkbox"> <label class="option" for="edit-field-culture-und-21">Poland (Polish) </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-11">
<input type="checkbox" id="edit-field-culture-und-11" name="field_culture[und][11]" value="11" class="form-checkbox"> <label class="option" for="edit-field-culture-und-11">Spain (Catalan) </label>
</div>
</td><td class="multicolumncheckboxesradios-column multicolumncheckboxesradios-column-last"><div class="form-item form-type-checkbox form-item-field-culture-und-25">
<input type="checkbox" id="edit-field-culture-und-25" name="field_culture[und][25]" value="25" class="form-checkbox"> <label class="option" for="edit-field-culture-und-25">United Kingdom </label>
</div>
</td></tr><tr class="odd"><td class="multicolumncheckboxesradios-column-first multicolumncheckboxesradios-column"> </td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-5">
<input type="checkbox" id="edit-field-culture-und-5" name="field_culture[und][5]" value="5" class="form-checkbox"> <label class="option" for="edit-field-culture-und-5">Belgium (French) </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-9">
<input type="checkbox" id="edit-field-culture-und-9" name="field_culture[und][9]" value="9" class="form-checkbox"> <label class="option" for="edit-field-culture-und-9">Denmark </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-10">
<input type="checkbox" id="edit-field-culture-und-10" name="field_culture[und][10]" value="10" class="form-checkbox"> <label class="option" for="edit-field-culture-und-10">German </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-15">
<input type="checkbox" id="edit-field-culture-und-15" name="field_culture[und][15]" value="15" class="form-checkbox"> <label class="option" for="edit-field-culture-und-15">Italy </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-19">
<input type="checkbox" id="edit-field-culture-und-19" name="field_culture[und][19]" value="19" class="form-checkbox"> <label class="option" for="edit-field-culture-und-19">Netherlands (Dutch) </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-22">
<input type="checkbox" id="edit-field-culture-und-22" name="field_culture[und][22]" value="22" class="form-checkbox"> <label class="option" for="edit-field-culture-und-22">Portugal </label>
</div>
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-12">
<input type="checkbox" id="edit-field-culture-und-12" name="field_culture[und][12]" value="12" class="form-checkbox"> <label class="option" for="edit-field-culture-und-12">Spain (Spanish) </label>
</div>
</td><td class="multicolumncheckboxesradios-column multicolumncheckboxesradios-column-last"> </td></tr></tbody></table></div>
THEN JQUERY CODE
然后JQUERY代码
<script type="text/javascript" src="http://caarcher.biz/ryn/ryn/misc/jquery.js?v=1.4.4"></script>
<script language="javascript1.1" >
(function ($){
$(document).ready(function(){
alert("this is text");
$("[id^='edit-field-select']").click(function(){
alert("found anoather one");
if($("#edit-field-select-all-und").is(":checked") )
{
$("#edit-field-select-none-und").attr("disabled",true);
$("#edit-field-select-none-und").attr("checked",false);
$("[id^='edit-field-culture-und-']").attr("checked",true);
$("[id^='edit-field-culture-und-']").attr("disabled",true);
}else if($("#edit-field-select-none-und").is(":checked"))
{
$("#edit-field-select-all-und").attr("disabled",true);
$("[id^='edit-field-culture-und-']").attr("checked",false);
$("[id^='edit-field-culture-und-']").attr("disabled",true);
}
else
{
$("[id^='edit-field-select']").attr("disabled",false);
$("[id^='edit-field-culture-und-']").attr("checked",false);
$("[id^='edit-field-culture-und-']").attr("disabled",false);
}
});
});
}) (jQuery);
</script>
