jquery - show textbox when checkbox checked

Question

I have this form

<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>

As of now, I'm using this jquery code to show textbox when checkbox checked.

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

It works fine, but it shows all textboxes when checked.

Can someone help me to fix it?

Here is the demo of my problem.

http://codepen.io/mistergiri/pen/spBhD

James Donnelly · Accepted Answer · 2013-10-29 22:26:32Z

8

As your dividers are placed next to your checkboxes, you simply need to use jQuery's next() method to select the correct elements:

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

Updated Codepen demo.

From the documentation (linked above), the next() method selects:

...the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Here we're selecting the next div.max_tickets element. However in your case just using next() with no parameters would suffice.

answered Oct 29, 2013 at 22:26

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2013-10-29 22:29:10Z

3

Assuming markup will stay in same order can use next()

jQuery(document).ready(function($) {

    $('input.maxtickets_enable_cb').change(function(){
                $(this).next()[ this.checked ? 'show' : 'hide']();  
    }).change();
});

answered Oct 29, 2013 at 22:29

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

cssyphus · Accepted Answer · 2013-10-29 22:29:33Z

1

Change:

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

To:

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

jsFiddle example here

answered Oct 29, 2013 at 22:29

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

Comments

David Thomas · Accepted Answer · 2013-10-29 22:34:47Z

1

Maybe try selecting the next element only?

change:

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

to:

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

edited Oct 29, 2013 at 22:34

David Thomas

254k53 gold badges382 silver badges421 bronze badges

answered Oct 29, 2013 at 22:29

samsquanch

5313 silver badges12 bronze badges

Comments

jforjs · Accepted Answer · 2013-10-29 22:52:57Z

Put a div across your checkbox and text box

<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>

and replace your jquery code with this one below,

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();
});

I have tested it and it works.

James Donnelly · Accepted Answer · 2013-10-30 23:40:05Z

1

While you may need a JavaScript solution for other reasons, it's worth noting that this can be achieved with pure CSS:

input + div.max_tickets {
    display: none;
}

input:checked + div.max_tickets {
    display: block;
}

JS Fiddle demo.

Or, with jQuery, the simplest approach seems to be:

// 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();

JS Fiddle demo.

Reference:

CSS:
- :checked pseudo-class.
jQuery:
- change().
- next().
- toggle().

edited Oct 30, 2013 at 23:40

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

answered Oct 29, 2013 at 22:33

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Comments

slavoo · Accepted Answer · 2014-12-19 10:07:27Z

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();
}

Collectives™ on Stack Overflow

jquery - show textbox when checkbox checked

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related