Displaying form inputs using jquery

Question

I want write jquery code that will show form inputs after a checkbox is checked. This is how I have formated the form inputs. What is the best way of doing this?

    echo '<li class="checkbox_item">'. form_label('Number of bedrooms','bedrooms'). form_checkbox('bedrooms','yes'). form_error('bedrooms').'</li>';
    echo '<li class="input_item" id=no_rooms>'. form_label('Number of bedrooms','bedrooms'). form_input('bedrooms'). form_error('bedrooms').'</li>';

    echo '<li class="checkbox_item">'. form_label('Number of bathfooms','bathrooms'). form_checkbox('bathrooms'). form_error('bathrooms').'</li>';
    echo '<li class="input_item">'. form_label('Number of bathfooms','bathrooms'). form_input('bathrooms'). form_error('bathrooms').'</li>';

Nicola Peluchetti · Accepted Answer · 2011-07-01 14:55:24Z

4

You could do:

//hide all inputs
$('.input_item').hide()

//when a checkbox is ticked, hide/unihde next li 
$('.checkbox_item input').click(function(){
    $(this).closest('li').next('.input_item').toggle($(this).is(':checked'));
});

working fiddle http://jsfiddle.net/ttyx8/1/

EDIT (i added a selector to next so that the code is better)

edited Jul 1, 2011 at 14:55

answered Jul 1, 2011 at 14:48

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

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

2 Comments

picus Over a year ago

Nicola's answer is the best answer in that it is very straightforward and would serve most purposes, a more elaborate way would be to load the fields into the dom using the get() function or actively building them and inserting via the html() function. The benefit to doing it that way is that the fields wouldn't be in the DOM unless they were actually needed. Pretty minor for a few checkboxes, but if you were replacing or loading a lot of data or elements it might be beneficial. Also this method would allow for more dynamic stuff (conditional sets of checkboxes based on other inputs)

serengeti12 Over a year ago

That is exactly what I needed. thanks. I also didn't know the jsfiddle site. I think it will help me a lot

Jingshao Chen · Accepted Answer · 2011-07-01 15:06:45Z

0

I think the best way to do is to use the "change()" event and "toggle()" function. You can bind the "change()" event to the checkbox, once triggered, "toggle" the display of the target element.

Example in the following have one checkbox, once checked, an input field will display. Once unchecked, the input field will hide.

<html>
<head>
<script type='text/javascript' 
      src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'>
</script>

<script type='text/javascript'>
$(document).ready(function(){
    $('#selectroom').change(function(){
        $('#chooseroom').toggle();
    });
});

</script>

</head>
<body>
<p>
 Select bedrooms <input type='checkbox' id='selectroom'/>
</p>
<p id='chooseroom' style='display:none;'>
 How many bedrooms? <input type='text' name='roomnumber'/>
</p>
</body>

</html>

answered Jul 1, 2011 at 15:06

Jingshao Chen

3,5152 gold badges29 silver badges34 bronze badges

1 Comment

serengeti12 Over a year ago

I'm trying to avoid using a different Id for each checkbox and input. I need something that will work for all of checkboxes and inputs

Collectives™ on Stack Overflow

Displaying form inputs using jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related