切换输入字段

Question

i am trying this code:

<script type="text/javascript">
$(document).ready(function () {
$('#individual,#company').hide();

$('input[name=radios]:radio:checked').change(function() {
    $('#individual').toggle(this.selectedIndex === 0);
    $('#company').toggle(this.selectedIndex === 1);
});

});
</script>


<div class="radio-toolbar">
    <input type="radio"  name="radios"> 
    <input type="radio"  name="radios"> 
</div>

<div id="x">
    <form method="post" id="customForm" action="">
        <div id="individual">
            <input name="individual" type="text" />
        </div>
        <div id="company"> 
            <input name="company" type="text" />
        </div>
    </form>
</div>

basically i want to show only an input field. if i choose the first radio btn, then, i want display the div individual. If i choose the second radio, should be showed the company content.

thanks

demo here

Answer 1

I would rewrite the script so the radio's have different values and use the value as the trigger instead of the === 0 / 1 construction..

<script type="text/javascript">
$(document).ready(function () {
$('#individual,#company').hide();

$("input[name='radios']").change(function() {
    switch ($(this).val()) {
      case 'ind':
          $('#individual').show();
          $('#company').hide();
      break;
      case 'comp':
          $('#individual').hide();
          $('#company').show();
      break;
    }
});

});
</script>


<div class="radio-toolbar">
    <input type="radio"  name="radios" value="ind"> 
    <input type="radio"  name="radios" value="comp"> 
</div>

<div id="x">
    <form method="post" id="customForm" action="">
        <div id="individual">
            <input name="individual" type="text" />
        </div>
        <div id="company"> 
            <input name="company" type="text" />
        </div>
    </form>
</div>

Answer 2

Just added value attributes to the input

 <div class="radio-toolbar">
    <input type="radio" name="radios" value="i"> 
    <input type="radio" name="radios" value="c"> 
</div>

<div id="x">
    <form method="post" id="customForm" action="">
        <div id="individual">
            <input name="individual" type="text" />
        </div>
        <div id="company"> 
            <input name="company" type="text" />
        </div>
    </form>
</div>

... changed the selector, and compare with the aforementioned values, since the selectedIndex property doesn't exist in radio buttons.

$(document).ready(function () {
    $('#individual,#company').hide();

    $('input[name=radios]').change(function() {
      $('#individual').toggle($(this).val() === 'i');
      $('#company').toggle($(this).val() === 'c');
    });
});

Answer 3

You can keep it simple and have the radio buttons trigger the change.

<script type="text/javascript">
$(document).ready(function () {
    $('#individual').add('#company').hide();
});
</script>
<div class="radio-toolbar">
    <input type="radio" name="radios" onclick="$('#individual').show();$('#company').hide();"> Individual
    <input type="radio" name="radios" onclick="$('#company').show();$('#individual').hide();"> Company
</div>

...