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

Show related content when radio button is checked javascript

本文关键字：显示 单选按钮 javascript      更新时间：2023-09-26

因此，我在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>

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

A清洁和普通方式：

CCD_ 1和CCD_。(您可以将输入标签放在<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以访问<label>。<label>在JavaScript中是<input>:的下一个元素同级

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

HTML输出：

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

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

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

(代替&nbsp;，使用CSS左边空白(

演示

我唯一能发现的错误是你错过了包围行<tr>按表标记<table>标签。我已经让它在一个巨大的中工作了

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

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";
相关文章：