Question

所以，我在js中有以下功能，当选择了单选按钮的值时，它应该显示相关内容。然而，它不起作用，无论我做什么，盒子都不会显示出来。

function select_movimento(value)
    {
        if(value==1)
            document.getElementById("linear").style.display="block";            
        else
            document.getElementById("linear").style.display="none"; 
        if(value==2)
            document.getElementById("circular").style.display="block";
        else
            document.getElementById("linear").style.display="none"; 
        if(value==3)
            document.getElementById("rotacional").style.display="block";
        else
            document.getElementById("linear").style.display="none";
        if(value==4)
            document.getElementById("mudanca_config_mao").style.display="block";
        else
            document.getElementById("linear").style.display="none";     
    }

这些是收音机：

    <input name="tipomov" type="radio" value="1" onclick="select_movimento(this.value);">&nbsp;Linear</input>
    <input name="tipomov" type="radio" value="2" onclick="select_movimento(this.value);">&nbsp;Circular</input>
    <input name="tipomov" type="radio" value="3" onclick="select_movimento(this.value);">&nbsp;Rotacional</input>
    <input name="tipomov" type="radio" value="4" onclick="select_movimento(this.value);">&nbsp;Mudan&ccedil;a de Configura&ccedil;&atilde;o de M&atilde;o</input>

这些是应该出现的内容：

<tr id="linear" height="30%" style="display:none;">
        <td>linear</td>
    </tr>
    <tr id="circular" height="30%" style="display:none;">
        <td>circular</td>
    </tr>
    <tr id="rotacional" height="30%" style="display:none;">
        <td>rotacional</td>
    </tr>
    <tr id="mudanca_config_mao" height="30%" style="display:none;">
        <td>mudanca de configuarcao</td>
    </tr>

这可能是一个简单的错误，但我是初学者，所以欢迎任何帮助。非常感谢你

Answer 1

我唯一能找到的错误就是你错过了围绕行＆lt; TR＆GT;标签由表＆lt;表＆gt;标签。我已经在plunker

中使用了它

<table>
<tr id="linear" height="30%" style="display:none;">
    <td>linear</td>
</tr>
<tr id="circular" height="30%" style="display:none;">
    <td>circular</td>
</tr>
<tr id="rotacional" height="30%" style="display:none;">
    <td>rotacional</td>
</tr>
<tr id="mudanca_config_mao" height="30%" style="display:none;">
    <td>mudanca de configuarcao</td>
</tr>
</table>

Answer 2

你的if和else语句的逻辑有问题。所有其他语句都关闭了“线性”文本，而不是关闭与IF测试中的值对应的文本。

我想你的意思是：

    if(value==1)
        document.getElementById("linear").style.display="block";
    else
        document.getElementById("linear").style.display="none";
    if(value==2)
        document.getElementById("circular").style.display="block";
    else
        document.getElementById("circular").style.display = "none";
    if(value==3)
        document.getElementById("rotacional").style.display="block";
    else
        document.getElementById("rotacional").style.display = "none";
    if(value==4)
        document.getElementById("mudanca_config_mao").style.display="block";
    else
        document.getElementById("mudanca_config_mao").style.display = "none";

Answer 3

干净和普通方式：

之后立即出现的<input>和<label>之间的关系。（您可以将输入标签放在<form>）

中

<form>
    <input id="r1" onclick="f(this.id)" type="radio" />
    <label>text</label>
    <input type="radio" ... />
    <label>text</label>
</form>

在功能 f（this.id）中，我们传递点击的<input>中的 ID 来访问{{ 1}}。来自<label>的 nextElementSibling 是JavaScript中的<label>：

<input>

HTML输出：

var element = document.getElementById("r1");
var text = element.nextElementSibling.innerHTML; // label text

如果单击单选按钮，<div id="output"></div>的 innerHTML 将是标签标签的 innerHTML 。

<div id="output"></div>

（而不是var output = document.getElementById("output"); output.innerHTML = text; // label text使用CSS margin-left）

Demo

javascript检查单选按钮时显示相关内容

3 个答案: