Question

我有CheckBox和文本框我试图删除隐藏的CssClass后，用户检查我尝试使用的框，但它没有用，有人可以帮助我

HTML

    <ul id="sortable">
<asp:Repeater runat="server" ID="rep_sortable">
    <ItemTemplate>

   <li class="ui-state-default">
       <span class="ui-icon ui-icon-arrowthick-2-n-s"></span><%# DataBinder.Eval(Container.DataItem, "Body") %>  
       <asp:CheckBox ID="chb_com"  runat="server" AutoPostBack="false" Checked='<%# DataBinder.Eval(Container.DataItem, "Completed")  %>' oncheckedchanged="CheckBox1_CheckedChanged"/>
       <asp:HiddenField ID="hf_reminderID" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "ReminderID")  %>'/>
       <asp:TextBox runat="server" ID="txtb_whyclosed" CssClass="hidden"></asp:TextBox>
   </li>
    </ItemTemplate>
</asp:Repeater>
</ul>

Jquery

$("input[type=checkbox]").on("click", function () {
    console.log("vbvsdvs");
    $("input[type=checkbox]").next("input:text").removeClass("hidden");

Answer 1

尝试以下代码：

$("input[type='checkbox']").on("click", function () {
    $("#txtb_whyclosed").removeClass("hidden");
})

OR

$("input[type='checkbox']").click(function () {
    $("#txtb_whyclosed").removeClass("hidden");
});

Answer 2

jQuery next函数只选择下一个元素。它找不到与选择器匹配的下一个元素。（选择器只是一个过滤器）

要使代码正常工作，请直接移动文本框旁边的复选框，以便下一步找到它：

<li class="ui-state-default">
   <span class="ui-icon ui-icon-arrowthick-2-n-s"></span><%# DataBinder.Eval(Container.DataItem, "Body") %>         
   <asp:HiddenField ID="hf_reminderID" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "ReminderID")  %>'/>
   <asp:CheckBox ID="chb_com"  runat="server" AutoPostBack="false" Checked='<%# DataBinder.Eval(Container.DataItem, "Completed")  %>' oncheckedchanged="CheckBox1_CheckedChanged"/>
   <asp:TextBox runat="server" ID="txtb_whyclosed" CssClass="hidden"></asp:TextBox>
</li>

或者使用nextAll来搜索当前元素之后的所有兄弟元素：

$("input[type=checkbox]").on("click", function () {
    console.log("vbvsdvs");
    $(this).nextAll("input:text").removeClass("hidden");

注意，您还应该在点击回调中使用$(this)，否则您将影响复选框后面的每个文本框。

Answer 3

您在这里使用转发器，因此您应该为复选框和文本框指定一个类名，以识别和区分其他输入：

HTML：

   <li class="ui-state-default">
       <span class="ui-icon ui-icon-arrowthick-2-n-s"></span><%# DataBinder.Eval(Container.DataItem, "Body") %>  
       <asp:CheckBox CssClass="checkbox" ID="chb_com"  runat="server" AutoPostBack="false" Checked='<%# DataBinder.Eval(Container.DataItem, "Completed")  %>' oncheckedchanged="CheckBox1_CheckedChanged"/>
       <asp:HiddenField ID="hf_reminderID" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "ReminderID")  %>'/>
       <asp:TextBox runat="server" ID="txtb_whyclosed" CssClass="hidden text"></asp:TextBox>
   </li>
    </ItemTemplate>
</asp:Repeater>

JS：

$("input.checkbox").on("click", function () {
    if($(this).is(":checked"))
         $(this).next(".text").removeClass("hidden");
    else
         $(this).next(".text").addClass("hidden");
})

Answer 4

我会选择这样的东西。

$('input[type=checkbox]').change(function() {
    var txtBox = $(this).nextAll('input:text');
    if ($(this).is(':checked')) {
        txtBox.removeClass('hidden');
    } else {
        txtBox.addClass('hidden');
    }
});

选中复选框后如何查看下一个元素

4 个答案: