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

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

我唯一能找到的错误是您没有用 table < table> 标记包围行 < tr> 标记。我让它在 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 语句的逻辑有问题。您所有的其他语句都关闭了 "linear" 文本，而不是关闭与 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

A clean 和 plain 方式：

<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)中我们传递 id从点击 <input> 访问 <label>。 <label> 在 JavaScript nextElementSibling 来自 <input>:

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

HTML 输出：

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

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

var output = document.getElementById("output");
output.innerHTML = text; // label text

（而不是   使用 CSS margin-left）

Demo

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

Show related content when radio button is checked javascript

html

javascript

radio-button