2010-04-15 50 views
5

我无法弄清楚这里发生了什么。我有一些复选框的嵌套列表,我希望在检查父代时检查。更重要的是,我甚至无法让警报显示出来。就好像点击事件没有触发。有任何想法吗?Jquery:处理复选框使用JQuery单击事件

<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> 
+0

请分享你的HTML因为最起码,你应该收到所示的代码的警报。 – 2010-04-15 05:49:13

+0

你能提供aproper html标记吗? – jAndy 2010-04-15 05:50:20

回答

11

您在代码示例末尾丢失了一个右括号)。这是一个复制和粘贴错误,或者是你的代码中的情况?

$(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") = ""; 
    } 
    }); 
}); 

编辑下面评论: 我不能完全肯定,如果我理解你想要做什么,而是试试这个未经测试代码。

$(document).ready(function() { 
    $("#part_mapper_list input[type=checkbox]").click(function() { 
    $("#" + $(this).val() + " input[type=checkbox]").attr("checked", $(this).attr("checked")); 
    }); 
}); 
+1

嗯,修复了警报,但嵌套复选框没有响应父复选框。 – wcolbert 2010-04-15 08:43:10

+0

我喜欢你的想法!这么简单,为什么我没有想到这个!?!?! :-D – wcolbert 2010-04-15 21:01:27

+1

总有一种更简单的方式来做任何事情!我可以想出一种方法来进一步简化代码(提示:$ .find()),但我太懒惰了。此外,如果您有任何问题(例如未显示警报),那通常意味着您错过了括号或其他小的语法错误。 Firebug(firefox扩展)和JSLint(JS代码检查网站)将是语法错误的首选。快乐的编码! – GlenCrawford 2010-04-16 01:15:09

3

如果警报没有解雇,那么我们的HTML标记可能会出现问题,请验证它是否格式良好,并且您是否正确嵌套了标记。

如果你可以发布你的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") = ""; 
    } 
    }); 
}); 

如果标记是正确的,有效的,直接访问rawdom对象的检查属性格式,而不是用jQuery包裹它,以尽量减少开销。

+0

谢谢。对于我的问题是'HTML标记'。 – 6339 2013-06-11 05:00:17

1

试试这个:

$(document).ready(function() { 
    $("#part_mapper_list :checkbox").click(function(){ 
    $(this).find(":checkbox").attr("checked", this.checked); 
    }); 
)}; 
0

试试这个 检查多个复选框使用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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</td></tr></tbody></table></div> 

THEN 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>