one radio button will be selected at a time

Question

I have a jsp page which shows the radio button content(on clicking it,select box will appear ) of a table.But here I'm unable select one radio button(with select box) at a time.I'm showing you the code.

<table>
<tr>
<td><input type="radio" onclick="document.getElementById('select1000').style.display=(this.checked)?'inline':'none';" name="license" value="1000"> 1-1000</td>
<td>
<div id="select1000" style="display: none">
<select id="">    
<option test="l25" value="25">25</option>
<option test="l100" value="100">100</option>

</select>
</div>
</td>
</tr>
<tr>
<td><input type="radio" onclick="document.getElementById('select3000').style.display=(this.checked)?'inline':'none';" name="license" value=""> 1001-3000</td>
<td>
<div id="select3000" style="display: none">
<select id="">
<option test="l1001" value="1001">1001</option>
<option test="l1075" value="1075">1075</option>

</select>
</div>
</td>
</tr>
<tr>
<td><input type="radio" onclick="document.getElementById('select5000').style.display=(this.checked)?'inline':'none';" name="license" value=""> 3001-5000</td>
<td>
<div id="select5000" style="display: none">
<select id="">
<option test="l3001" value="3001">3001</option>
<option test="l3075" value="3075">3075</option>

</select>
</div>
</td>
</tr>
</table>

Where I am going wrong ..... any valuable input will be appreciated.

Answer 1

您只需要更改括号即可：

document.getElementById('select5000').style.display =  (this.checked ? 'inline':'none');

Answer 2

Could you try to change the input element's name:

<td><input type="radio" onclick="change(this, 'select1000')" name="license[1]" value="1000"> 1-1000</td>

and create a function:

function change(t, div){

    var ele = document.getElementsByTagName("div");

    var radios = document.getElementsByName("license[1]"); 

        for (var i = 0, radio; radio = radios[i]; i++) {
            if (!radio.checked) {
                if(ele[i].id != div){
                    ele[i].style.display = 'none';               
                }
            }else{
               document.getElementById(div).style.display='inline';                
            }
        }

}

I'm not sure if this is what you want, but HERE you can see an example.

Answer 3

Here is your inputs

<input type="radio" onchange="hideElem(this,'select1000')" name="license" value="1000">
<input type="radio" onchange="hideElem(this,'select3000')" name="license" value="">
<input type="radio" onchange="hideElem(this,'select5000')" name="license" value="">

and the function:

<script type="text/javascript">
    function hideElem(self,divId){
        var divs = ['select1000','select3000','select5000'];
        if(self.checked){
           for(var i=0; i < divs.length; i++){
                if (divs[i] === divId){
                    document.getElementById(divs[i]).style.display = 'inline';
                } else{
                    document.getElementById(divs[i]).style.display = 'none';
                }
           }
        }
    }        
</script>

DEMO

Answer 4

because when you click an input(radio), this is the current radio and you don't know the previous one, you need to record the previous select, use jQuery, code like:

(function () {
    var oldSel = null;
    $('input:radio').click(function () {
        // get the current select
        var sel = $('#select' + this.value);
        // show current select
        sel.show();
        // if old select is exist, hide it
        oldSel && oldSel.hide();
        // store the current select when radio on click
        oldSel = sel;
    })​;
})();​

see the demo