0

我有一个 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>

我哪里出错了.....任何有价值的意见将不胜感激。

4

4 回答 4

1

这是您的输入

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

演示

于 2012-07-10T07:04:51.350 回答
1

因为当你点击一个input(radio)时，this是当前的radio，你不知道上一个，你需要记录之前的选择，使用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;
    })​;
})();​

看演示

于 2012-07-10T07:06:05.530 回答
1

您能否尝试更改输入元素的名称：

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

}

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

于 2012-07-10T06:56:56.400 回答
1

你只需要改变你的括号：

document.getElementById('select5000').style.display =  (this.checked ? 'inline':'none');
于 2012-07-10T06:02:08.277 回答