Jquery - Show Textbox When Checkbox Checked

I have this form

Solution 1:

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.

Solution 2:

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

Solution 3:

Change:

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

To:

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

jsFiddle example here

Solution 4:

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

Solution 5:

Put a div across your checkbox and text box

<formaction=""><divid="opwp_woo_tickets"><div><inputtype="checkbox"class="maxtickets_enable_cb"name="opwp_wootickets[tickets][0][enable]"><divclass="max_tickets"><inputtype="text"name="opwp_wootickets[tickets][0][maxtickets]"></div></div><div><inputtype="checkbox"class="maxtickets_enable_cb"name="opwp_wootickets[tickets][1][enable]"><divclass="max_tickets"><inputtype="text"name="opwp_wootickets[tickets][1][maxtickets]"></div></div><div><inputtype="checkbox"class="maxtickets_enable_cb"name="opwp_wootickets[tickets][2][enable]"><divclass="max_tickets"><inputtype="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.

Share