取消选中复选框时未触发jQuery单击功能答案

【问题标题】：jQuery click function not triggered when unchecking checkbox取消选中复选框时未触发jQuery单击功能
【发布时间】：2011-10-10 00:57:03
【问题描述】：

这是我的头，我已经用谷歌搜索了它的生命，但下面是我的代码，非常简单，但是取消选中复选框时没有触发点击事件？？

$('#filterStarDiv #hotelFilterForm #Star0').click( function() {
alert('Checkbox 0 clicked');});

<div id="starsRemoved" style="display:none">No Stars Removed</div>
<div id="filterStarDiv">
<h6>Click on the star ratings below to add or remove hotels in that category</h6>
<form:form id="hotelFilterForm" action="" acceptCharset="UTF-8">
    <input type="checkbox" id="Star0"  name="Star0" value="0 Star" checked="checked" /> 0 Star<br />
    <input type="checkbox" id="Star1"  name="Star1" value="1 Star" checked="checked" /> 1 Star<br />
    <input type="checkbox" id="Star2"  name="Star2" value="2 Star" checked="checked" /> 2 Star<br />
    <input type="checkbox" id="Star3"  name="Star3" value="3 Star" checked="checked" /> 3 Star<br />
    <input type="checkbox" id="Star4"  name="Star4" value="4 Star" checked="checked" /> 4 Star<br />
    <input type="checkbox" id="Star5"  name="Star5" value="5 Star" checked="checked" /> 5 Star+<br />
</form:form>
</div>

如果我错过了一些愚蠢的东西，任何帮助，甚至是滥用，都将不胜感激。

【问题讨论】：

Id 是唯一的，您不必像这样将它们视为依赖项：#filterStarDiv #hotelFilterForm #Star0。只需#Star0 就足够了。
什么是：<form:form 和 </form:form>？表单中的输入元素也需要放在<div> 或<p> 中。您不能将它们直接放在<form> 标签内。
对我来说似乎工作正常：jsfiddle.net/Maga2（我当然修复了表单标签。）
api.jquery.com/change

标签： jquery checkbox click css-selectors

【解决方案1】：

为你的 javascript 试试这个：

$().ready(function() {
    $(':checkbox').click(function() { alert($(this).attr('name')); });
});

【讨论】：

使用之前建议的 onclick 效果很好，但也正如评论所言，使用 jQuery 是目标。我现在一直使用这种方法，直到我能弄清楚为什么选择器没有触发事件。

【解决方案2】：

在此处查看工作演示 jsfiddle。您可能忘记在页面中添加 jquery js 文件引用。

【讨论】：

【解决方案3】：

你可以试试这样的：

$("input[type=checkbox]").click( function() {
    if ($(this).is(':checked')){
        alert('check');
    }
    else{
        alert('uncheck');
    }
});

你可以试试这个Fiddle

【讨论】：

【解决方案4】：

但这很好用……

<html>
  <head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#filterStarDiv #hotelFilterForm #Star0').click( function() {
          alert('Checkbox 0 clicked');
        });
      });
    </script>
  </head>
  <body>
    <div id="starsRemoved" style="display:none">No Stars Removed</div>
    <div id="filterStarDiv">
      <h6>Click on the star ratings below to add or remove hotels in that category</h6>
      <form id="hotelFilterForm" action="" method="post">
        <input type="checkbox" id="Star0"  name="Star0" value="0 Star" checked="checked" /> 0 Star<br />
        <input type="checkbox" id="Star1"  name="Star1" value="1 Star" checked="checked" /> 1 Star<br />
        <input type="checkbox" id="Star2"  name="Star2" value="2 Star" checked="checked" /> 2 Star<br />
        <input type="checkbox" id="Star3"  name="Star3" value="3 Star" checked="checked" /> 3 Star<br />
        <input type="checkbox" id="Star4"  name="Star4" value="4 Star" checked="checked" /> 4 Star<br />
        <input type="checkbox" id="Star5"  name="Star5" value="5 Star" checked="checked" /> 5 Star+<br />
      </form>
    </div>
  </body>
</html>

找出你犯的错误。

【讨论】：

【解决方案5】：

为所有复选框尝试此选项。如果你想为任何特定的复选框做，请使用 Id

$(':checkbox').click(function(){
    var el = $(this);
    if(!el.is(':checked')){
       alert ('unchecked');
       //if you want to trigger handler or do something. do it here
       el.triggerHandler('click');
   }
})

【讨论】：