Question

我有一个jsp页面，显示一个表格的单选按钮内容（点击它，会出现选择框）。但是这里我一次无法选择一个单选按钮（带选择框）。我是向您展示代码。

<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>

我出错了......任何有价值的意见都会受到赞赏。

Answer 1

您只需要更改括号：

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

Answer 2

您可以尝试更改输入元素的名称：

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

并创建一个函数：

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

}

我不确定这是否是你想要的，但HERE你可以看到一个例子。

Answer 3

这是您的输入

<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="">

和功能：

<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

因为当您单击输入（收音机）时，this是当前的收音机而您不知道前一个收音机，您需要录制前一个选择，使用jQuery，代码如下：

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

请参阅demo

将一次选择一个单选按钮

4 个答案: