Jquery: Handling Checkbox Click Event with JQuery
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 = a开发者_如何学运维rray("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>
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 untested code.
$(document).ready(function() {
$("#part_mapper_list input[type=checkbox]").click(function() {
$("#" + $(this).val() + " input[type=checkbox]").attr("checked", $(this).attr("checked"));
});
});
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.
I would be much helpful if you can as well post your HTML code, for us to inspect the problem.
$(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.
Try This:
$(document).ready(function() {
$("#part_mapper_list :checkbox").click(function(){
$(this).find(":checkbox").attr("checked", this.checked);
});
)};
try this
check 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
<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
<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>
加载中,请稍侯......
精彩评论