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

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