使用 jQuery 从复选框组中获取值只能工作一次

Posted 2023-05-09

【中文标题】使用 jQuery 从复选框组中获取值只能工作一次

【英文标题】：gettings values from checkbox group with jQuery only works once

【发布时间】：2013-07-22 23:42:14

【问题描述】：

我正在尝试构建一个组中所有选定复选框的值的数组（我在此页面上有多个复选框组，但下面是其中之一）。

当我点击一个复选框时，我首先收到一个值为“0”的警报，然后是一个值为“1”的警报。这正如预期的那样。 但是，当我选中第二个复选框时，警报不再出现。我的 Chrome 控制台中也没有看到任何错误。

为什么？

HTML

    <table id="CPHCenter_cblFeatures" class="cblist textbox" style="width:100%;">
        <tbody>
            <tr>
                <td>
                <input id="CPHCenter_cblFeatures_0" type="checkbox" name="ctl00$CPHCenter$cblFeatures$0" onclick="javascript:setTimeout('__doPostBack(\'ctl00$CPHCenter$cblFeatures$0\',\'\')', 0)" value="6">
                <label for="CPHCenter_cblFeatures_0">Arbor</label></td>
                <td><input id="CPHCenter_cblFeatures_4" type="checkbox" name="ctl00$CPHCenter$cblFeatures$4" onclick="javascript:setTimeout('__doPostBack(\'ctl00$CPHCenter$cblFeatures$4\',\'\')', 0)" value="7"><label for="CPHCenter_cblFeatures_4">Disabled access</label></td>
            </tr><tr>
                <td><input id="CPHCenter_cblFeatures_1" type="checkbox" name="ctl00$CPHCenter$cblFeatures$1" onclick="javascript:setTimeout('__doPostBack(\'ctl00$CPHCenter$cblFeatures$1\',\'\')', 0)" value="3"><label for="CPHCenter_cblFeatures_1">Beach</label></td>
                <td><input id="CPHCenter_cblFeatures_5" type="checkbox" name="ctl00$CPHCenter$cblFeatures$5" onclick="javascript:setTimeout('__doPostBack(\'ctl00$CPHCenter$cblFeatures$5\',\'\')', 0)" value="4"><label for="CPHCenter_cblFeatures_5">Forest</label></td>
            </tr><tr>
                <td><input id="CPHCenter_cblFeatures_2" type="checkbox" name="ctl00$CPHCenter$cblFeatures$2" onclick="javascript:setTimeout('__doPostBack(\'ctl00$CPHCenter$cblFeatures$2\',\'\')', 0)" value="1"><label for="CPHCenter_cblFeatures_2">Bridal suite</label></td>
                <td><input id="CPHCenter_cblFeatures_6" type="checkbox" name="ctl00$CPHCenter$cblFeatures$6" onclick="javascript:setTimeout('__doPostBack(\'ctl00$CPHCenter$cblFeatures$6\',\'\')', 0)" value="2"><label for="CPHCenter_cblFeatures_6">Garden</label></td>
            </tr><tr>
                <td><input id="CPHCenter_cblFeatures_3" type="checkbox" name="ctl00$CPHCenter$cblFeatures$3" onclick="javascript:setTimeout('__doPostBack(\'ctl00$CPHCenter$cblFeatures$3\',\'\')', 0)" value="5"><label for="CPHCenter_cblFeatures_3">Dancing room</label></td>
                <td><input id="CPHCenter_cblFeatures_7" type="checkbox" name="ctl00$CPHCenter$cblFeatures$7" onclick="javascript:setTimeout('__doPostBack(\'ctl00$CPHCenter$cblFeatures$7\',\'\')', 0)" value="8"><label for="CPHCenter_cblFeatures_7">Water</label></td>
            </tr>
        </tbody>
    </table>

jQuery

     function getresults()            
         var arr = new Array();
         $.each($("input[name*='cblFeatures']:checked"), function () 
             arr.push($(this).val());
         );

         alert(arr.length);
         arr = new Array();
         return true;
     



     $(document).ready(function () 
         $("#<%=cblFeatures.ClientID%>").click(function ()  getresults(); );
         );

【参考方案1】：

在我看来，这可能是#<%=cblFeatures.ClientID%>selector 的问题......也许可以尝试一下这样的效果：

 $(document).ready( function() 
     $("input[name*='cblFeatures']").click(function()  getresults(); );
 );

以下是它按您预期的方式运行的小提琴：http://jsfiddle.net/tcQwd/

希望有帮助！

【讨论】：

它现在可以工作了...可能是我在 asp.net checkboxlist 控件上设置了 AutoPostBack=true 并将所有内容都放在了更新面板中。我删除了自动回发和更新面板并修复了它。谢谢！

【参考方案2】：

为您的checkboxes 定义一个class 并将其用于click 事件，因为id 是一个独特的属性，使用id 的点击事件仅适用于该特定checkbox。假设您已将 checkbox 类应用于每个复选框，则可以按以下方式进行操作

$(".checkbox").click(function ()  getresults(); );

【参考方案3】：

您只是将点击事件分配给一个 id。

$("#<%=cblFeatures.ClientID%>").click(function ()  getresults(); );