Javascript jquery-选中复选框时显示文本框

我有这张表格

<form action="">
  <div id="opwp_woo_tickets">
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
    </div>

    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][1][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][1][maxtickets]">
    </div>

    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][2][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][2][maxtickets]">
    </div>
  </div>
</form>

它工作正常，但选中时会显示所有文本框

有人能帮我修一下吗

这是我的问题的演示

---

当您的分隔符放在复选框旁边时，您只需使用选择正确的元素：

if ($(this).is(':checked'))
    $(this).next('div.max_tickets').show();
else
    $(this).next('div.max_tickets').hide();

从上面链接的文档中，

next（）

方法选择：

…匹配元素集中每个元素的紧随其后的同级元素。如果提供了选择器，则仅当它与该选择器匹配时，才会检索下一个同级

---

这里我们选择下一个

div.max\u tickets

元素。但是，在您的情况下，只使用不带参数的

next（）

就足够了。

假设标记保持相同的顺序，可以使用

next（）

---

可能只选择下一个元素

更改：

if ($(this).is(':checked')) $('div.max_tickets').show();  

致：

更改：

if ($(this).is(':checked')) $('div.max_tickets').show();

致：

---

虽然您可能出于其他原因需要JavaScript解决方案，但值得注意的是，这可以通过纯CSS实现：

input+div.max\u票据{
显示：无；
}
输入：选中+div.max\u票据{
显示：块；
}

或者，使用jQuery，最简单的方法似乎是：

// binds the change event-handler to all inputs of type="checkbox"
$('input[type="checkbox"]').change(function(){
    /* finds the next element with the class 'max_tickets',
       shows the div if the checkbox is checked,
       hides it if the checkbox is not checked:
    */
    $(this).next('.max_tickets').toggle(this.checked);
// triggers the change-event on page-load, to show/hide as appropriate:
}).change();

参考：

• CSS:
• jQuery：

---

在复选框和文本框上加一个div

<form action="">
<div id="opwp_woo_tickets">
<div>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
    </div>
</div>
<div>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][1][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][1][maxtickets]">
    </div>
</div>
<div>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][2][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][2][maxtickets]">
    </div>
</div>
</div>
</form>

我已经对它进行了测试，它可以正常工作。

受保护的void EnableTextBox（）
protected void EnableTextBox()
{
    int count = int.Parse(GridView1.Rows.Count.ToString());

    for (int i = 0; i < count; i++)
    {
        CheckBox cb = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox1");
        CheckBox cb1 = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox2");
        CheckBox cb2 = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox3");
        TextBox tb = (TextBox)GridView1.Rows[i].Cells[4].FindControl("txtration");
        TextBox tb1 = (TextBox)GridView1.Rows[i].Cells[5].FindControl("txtjob");
        TextBox tb2 = (TextBox)GridView1.Rows[i].Cells[6].FindControl("txtaadhar");            

        if (cb.Checked == true)
        {
            tb.Visible = true;               
        }
        else
        {
            tb.Visible = false;    
        }

        if (cb1.Checked == true)
        {
            tb1.Visible = true;                
        }
        else
        {
            tb1.Visible = false;              
        }

        if (cb2.Checked == true)
        {
            tb2.Visible = true;               
        }
        else
        {
            tb2.Visible = false;
        }
    }
}

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
    EnableTextBox();
}

{
int count=int.Parse（GridView1.Rows.count.ToString（））；
for（int i=0；i

if ($(this).is(':checked')) $(this).next('div.max_tickets').show();

// binds the change event-handler to all inputs of type="checkbox"
$('input[type="checkbox"]').change(function(){
    /* finds the next element with the class 'max_tickets',
       shows the div if the checkbox is checked,
       hides it if the checkbox is not checked:
    */
    $(this).next('.max_tickets').toggle(this.checked);
// triggers the change-event on page-load, to show/hide as appropriate:
}).change();

<form action="">
<div id="opwp_woo_tickets">
<div>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
    </div>
</div>
<div>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][1][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][1][maxtickets]">
    </div>
</div>
<div>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][2][enable]">
    <div class="max_tickets">
        <input type="text" name="opwp_wootickets[tickets][2][maxtickets]">
    </div>
</div>
</div>
</form>

jQuery(document).ready(function($) {
   $('input.maxtickets_enable_cb').change(function(){
       if ($(this).is(':checked')) $(this).parent().children('div.max_tickets').show();
       else $(this).parent().children('div.max_tickets').hide();
   }).change();
});

protected void EnableTextBox()
{
    int count = int.Parse(GridView1.Rows.Count.ToString());

    for (int i = 0; i < count; i++)
    {
        CheckBox cb = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox1");
        CheckBox cb1 = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox2");
        CheckBox cb2 = (CheckBox)GridView1.Rows[i].Cells[0].FindControl("CheckBox3");
        TextBox tb = (TextBox)GridView1.Rows[i].Cells[4].FindControl("txtration");
        TextBox tb1 = (TextBox)GridView1.Rows[i].Cells[5].FindControl("txtjob");
        TextBox tb2 = (TextBox)GridView1.Rows[i].Cells[6].FindControl("txtaadhar");            

        if (cb.Checked == true)
        {
            tb.Visible = true;               
        }
        else
        {
            tb.Visible = false;    
        }

        if (cb1.Checked == true)
        {
            tb1.Visible = true;                
        }
        else
        {
            tb1.Visible = false;              
        }

        if (cb2.Checked == true)
        {
            tb2.Visible = true;               
        }
        else
        {
            tb2.Visible = false;
        }
    }
}

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
    EnableTextBox();
}