Javascript 在 asp.net 复选框列表中不起作用答案

【问题标题】：Javascript not working inside asp.net checkbox listJavascript 在 asp.net 复选框列表中不起作用
【发布时间】：2016-03-14 07:21:33
【问题描述】：

当我们点击asp.net中的复选框时，显示/隐藏javascript不起作用。我使用了以下代码。

代码 sn-ps：

 <div class="prod-filter-nav">
 <h4>Category</h4>
 <asp:CheckBoxList ID="CheckBoxList1"  runat="server" class="prod-list"  
 AutoPostBack="True"   RepeatLayout="UnorderedList">
 </asp:CheckBoxList>
 </div>

此页面使用的以下javascript：--

jQuery(document).ready(function($){
    $('.prod-filter-nav h4').on('click', function(){
        $(this).toggleClass('closed').siblings('.prod-list').slideToggle(300);
    })
});

当我们选择任何复选框项目时，javascript 不起作用

【问题讨论】：

标签： javascript jquery asp.net checkbox

【解决方案1】：

使用jquery更改事件(https://api.jquery.com/change/)

 $('#CheckBoxList1').change(function () {
        //your code here
    });

【讨论】：

【解决方案2】：

试试这个：使用ClientID 并删除AutoPostBack="True"

 $(document).ready(function () {
        $('<%=CheckBoxList1.ClientID%>').change(function () {
            //place your js code here
        });
    });

【讨论】：

【解决方案3】：

点击处理程序作用于<h4>元素的点击

$('.prod-filter-nav h4').on('click'

而不是在复选框项目上单击。我建议您将关联的点击处理程序更改为复选框项目级别。

【讨论】：

【解决方案4】：

您必须选择输入[type=checkbox]，但正如@Ganesh_Devlekar 首先回答的那样，如果您不需要 AutoPostBack，您必须删除它，并且您说您想在单击复选框而不是 H4 单击时触发事件，所以我将建议此代码

jQuery(document).ready(function($){
    $('.prod-filter-nav input[type=checkbox]').on('change', function(){
        $(this).closest(".prod-filter-nav").toggleClass('closed').siblings('.prod-list').slideToggle(300);
    })
});

但首先你必须确定 javascript 选择器

【讨论】：

在选择任何复选框项目后，我无法隐藏该 div，如果我不选择复选框，我可以在单击 h4 时隐藏该 div