JQuery: Show / hide the text box with the check box

advertisements

I have 6 checkbox and 6 textbox respectively as shown in the below script ,

http://jsfiddle.net/ramu_steve/H6dBW/1/

When ever i check a checkbox(radio button functionality) corresponding textbox is shown.. but when i move to check other checkbox,the textbox shown for previous checkbox is not been hidden until we uncheck the checkbox ...Thanks in advance


How about a simpler code?

Live example: http://jsbin.com/ewekit/1/edit

  <ul>
    <li>
      <label for="r1">
        <input type="checkbox" id="r1" name="r1" /> First Hotel Visit
      </label>
      <input type="text" id="t1" name="t1" />
    </li>
    <li>
      <label for="r2">
        <input type="checkbox" id="r2" name="r2" /> Repeat Hotel Visit
      </label>
      <input type="text" id="t2" name="t2" />
    </li>
    <li>
      <label for="r3">
        <input type="checkbox" id="r3" name="r3" /> Fish Bowl
      </label>
      <input type="text" id="t3" name="t3" />
    </li>
    <li>
      <label for="r4">
        <input type="checkbox" id="r4" name="r4" /> Large Party
      </label>
      <input type="text" id="t4" name="t4" />
    </li>
    <li>
      <label for="r5">
        <input type="checkbox" id="r5" name="r5" /> Generic
      </label>
      <input type="text" id="t5" name="t5" />
    </li>
    <li>
      <label for="r6">
        <input type="checkbox" id="r6" name="r6" /> Corp Marketing
      </label>
      <input type="text" id="t6" name="t6" />
    </li>
  </ul>

Javascript

$(function() {

  // hide all text inputs
  hideAllTextInputs();

  // radio click
  $("ul input[type='checkbox']").click(function() {

    // current <li>
    var li = $(this).closest("li");

    // show it's text
    li.find("input[type='text']").show();

    // hide all again
    hideAllTextInputs();
  });

});

function hideAllTextInputs() {
  // hide all text inputs
  $("ul input[type='checkbox']")
    .not(":checked")
    .closest("li")
    .find("input[type='text']")
    .hide();
}