Javascript 要使用一个单选按钮显示一个特定行，请选择并隐藏另一行_Javascript_Jquery

Javascript 要使用一个单选按钮显示一个特定行，请选择并隐藏另一行

javascript jquery

Javascript 要使用一个单选按钮显示一个特定行，请选择并隐藏另一行,javascript,jquery,Javascript,Jquery,这里我有两个单选按钮，我想要的是，如果我选择单选按钮学生，那么班级行应该是可见的，否则专业行是可见的。但一次只能看到一行 <tr><td>Member</td> <td><input type="radio" name="member" value="student" onClick = "select_mem()">Student<br></td> <td><input typ

这里我有两个单选按钮，我想要的是，如果我选择单选按钮学生，那么班级行应该是可见的，否则专业行是可见的。但一次只能看到一行

<tr><td>Member</td>
    <td><input type="radio" name="member" value="student" onClick = "select_mem()">Student<br></td>
    <td><input type="radio" name="member"  value="parent" onClick = "select_mem()">Parent<br></td></tr>
<tr><td>Class</td>
    <td><select name="class" style="width:50px" >
        <option value="1">I</option>
        <option value="2">II</option>
        <option value="3">III</option>
        <option value="4">IV</option>
        <option value="5">V</option></select></td></tr>
<tr><td>Profession</td>
    <td colspan="2"><input type="text" name="prof"</td></tr>

在这里，我试图得到stu值，看看我会得到什么，然后我可以把if条件。请帮我怎么做这应该会有帮助

<tr><td>Member</td>
    <td><input type="radio" name="member" value="student" onClick = "select_mem(this.value)">Student<br></td>
    <td><input type="radio" name="member"  value="parent" onClick = "select_mem(this.value)">Parent<br></td></tr>
<tr id="cls"><td>Class</td>
    <td><select name="class" style="width:50px" >
        <option value="1">I</option>
        <option value="2">II</option>
        <option value="3">III</option>
        <option value="4">IV</option>
        <option value="5">V</option></select></td></tr>
<tr id="pro"><td>Profession</td>
    <td colspan="2"><input type="text" name="prof"</td></tr>

function select_mem(val)
{
    if ( val == "student" ){
        document.getElementById("cls").style.display = "table-row";
        document.getElementById("pro").style.display = "none";
    } else {
        document.getElementById("cls").style.display = "none";
        document.getElementById("pro").style.display = "table-row";
    }
}

您可以从HTML位中删除onclick，并为要显示/隐藏的每一行添加一个ID：

<tr>
    <td>Member</td>
    <td>
        <input type="radio" name="member" value="student">Student<br>
    </td>
    <td>
        <input type="radio" name="member" value="parent">Parent<br>
    </td>
</tr>
<tr id="class" style="display:none">
    <td>Class</td>
...
</tr>
<tr id="profession" style="display:none">
    <td>Profession</td>
...
</tr>

看到它工作了吗

更新

由于您似乎在使用此解决方案时遇到问题，您可以在下面找到应放在页面中的完整代码，包括jQuery库链接：

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("input:radio[name=member]").on("click", function () {
                $("#class").toggle($(this).val() == "student");
                $("#profession").toggle($(this).val() == "parent");
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>Member</td>
            <td>
                <input type="radio" name="member" value="student">Student<br>
            </td>
            <td>
                <input type="radio" name="member" value="parent">Parent<br>
            </td>
        </tr>
        <tr id="class" style="display:none">
            <td>Class</td>
        </tr>
        <tr id="profession" style="display:none">
            <td>Profession</td>
        </tr>
    </table>
</body>

更新2

您已在评论中指出此解决方案不起作用。我已经测试了十几次，没有发现一个问题。你确定你知道你在做什么吗？你知道如何调试一段Javascript代码吗？是否正确添加jQuery库？您是否将脚本加载到正确的位置？这不仅仅是这里解释的。对不起，我看不出有别的办法可以帮你

检查以下图像以查看其是否正常工作：

试试这个

<tr><td>Member</td>
    <td><input type="radio" name="member" value="student" >Student<br></td>
    <td><input type="radio" name="member"  value="parent" >Parent<br></td></tr>
<tr><td>Class</td>
    <td><select name="class" style="width:50px" >
        <option value="1">I</option>
        <option value="2">II</option>
        <option value="3">III</option>
        <option value="4">IV</option>
        <option value="5">V</option></select></td></tr>
<tr><td class="Prof">Profession</td>
    <td colspan="2"><input type="text" name="prof"</td></tr>



$(function() { 
       $(".class").hide();
       $(".Prof").hide();
  $('input[type="radio"]').bind('click',function() {
        if($(this).val()=="student")
         { 
             $(".class").show();
         }
        else
          {
             $(".Prof").show();
          }
  });
});

而不是在“更改”事件处理程序上单击use.on

$(document).ready(function () {
    $('input[name=member]').on('change', function () {
       var value = $(this).val();  //get the selected option
        if(value === 'student'){  //show or hide based on condition
            $('.student').show();
            $('.parent').hide(); 
        }
        else {
            $('.parent').show();
            $('.student').hide();
        }

    });
});

工作

工作代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    function select_mem() {
        if ($("input[name='member']:checked").val() == "student") {
            $('.studentrow').hide();
            $('.parentrow').show();
        }
        else if ($("input[name='member']:checked").val() == "parent") {
            $('.parentrow').hide();
            $('.studentrow').show();
        }
    }
</script>
<title></title>
</head>
<body>
<table>
<tr>
    <td>Member</td>
    <td><input type="radio" name="member" value="student" onClick = "select_mem()">Student<br></td>
    <td><input type="radio" name="member" value="parent" onClick = "select_mem()">Parent<br></td>
</tr>
<tr class="studentrow"> 
    <td>Class</td>
    <td>
        <select name="class" style="width:50px" >
            <option value="1">I</option>
            <option value="2">II</option>
            <option value="3">III</option>
            <option value="4">IV</option>
            <option value="5">V</option>
        </select>
    </td>
</tr>
<tr class="parentrow">
    <td>Profession</td>
    <td colspan="2"><input type="text" name="prof"</td>
</tr>
</table>
</body>
</html>

我所做的就是

是否打开选中单选按钮的值隐藏/显示正文中的行为了隐藏\显示行，我为每一行指定了类，并对它们调用了.show和.hide方法。保留两个部分的ID

<tr class="hideclass" id="student"><td>Class</td>
<td><select name="class" style="width:50px" >
    <option value="1">I</option>
    <option value="2">II</option>
    <option value="3">III</option>
    <option value="4">IV</option>
    <option value="5">V</option></select></td></tr>
<tr class="hideclass" id="parent">
  <td>Profession</td>
  <td colspan="2"><input type="text" name="prof"</td>
</tr>

您不应该在函数中使用document.write，因为它不是为此而设计的。您应该使用display:none CSS创建不可见的html，并使用javascript显示/隐藏它们。不确定这是否是有意的，但您没有关闭输入。清除文档，即清除页面中的所有JS和HTML。如果在执行过程中需要检查变量的值，可以使用console.logstu或alertstu.：-不，它不工作，实际上它没有将值作为student或parentid，并且样式不应该放在行中？我就是这么做的。并且使用了切换，因为jQuery已经被使用了。它不起作用，我的意思是它没有在选择学生和家长时显示类。你检查了JSFIDLE链接吗？告诉我一件事，它将如何调用该函数？因为在脚本中我有很多函数，所以我不应该放一些鼠标事件来调用这个函数吗？告诉我一件事，它将如何调用那个函数？因为在脚本中我有很多函数，所以我不应该在那里放置一些鼠标事件来调用这个函数吗？这是调用输入类型的单选更改，我得到了，但是当html代码知道它必须从脚本中读取一些函数时？当加载这两行时将首先可见？你想要什么？默认情况下，哪些行需要可见？首先加载后，只有单选按钮行可见。然后在选择单选按钮后，我希望学生：然后班级行应该是可见的，我的意思是两列一起，家长：专业行应该是可见的visible@VivakshaSolanki我没有得到你。尽管您可以简单地将$'.parentrow'.hide；$'放入。学生行节目；无论你想去哪里。如果你想它发生在页面加载你可以把它。例如，将$'.parentrow.hide和$'.studentrow.hide放入document.ready中最初将隐藏这两行。如果问题解决了，您可以将所需的回复标记为答案。主要问题是我无法检索radio Button的值这可以放在标记内？您没有设置检查的if条件我们不需要检查这些内容。因为在第二行中，它通过查找类隐藏所有行，然后在最后一行中打开currenttclicked。。。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    function select_mem() {
        if ($("input[name='member']:checked").val() == "student") {
            $('.studentrow').hide();
            $('.parentrow').show();
        }
        else if ($("input[name='member']:checked").val() == "parent") {
            $('.parentrow').hide();
            $('.studentrow').show();
        }
    }
</script>
<title></title>
</head>
<body>
<table>
<tr>
    <td>Member</td>
    <td><input type="radio" name="member" value="student" onClick = "select_mem()">Student<br></td>
    <td><input type="radio" name="member" value="parent" onClick = "select_mem()">Parent<br></td>
</tr>
<tr class="studentrow"> 
    <td>Class</td>
    <td>
        <select name="class" style="width:50px" >
            <option value="1">I</option>
            <option value="2">II</option>
            <option value="3">III</option>
            <option value="4">IV</option>
            <option value="5">V</option>
        </select>
    </td>
</tr>
<tr class="parentrow">
    <td>Profession</td>
    <td colspan="2"><input type="text" name="prof"</td>
</tr>
</table>
</body>
</html>

<tr class="hideclass" id="student"><td>Class</td>
<td><select name="class" style="width:50px" >
    <option value="1">I</option>
    <option value="2">II</option>
    <option value="3">III</option>
    <option value="4">IV</option>
    <option value="5">V</option></select></td></tr>
<tr class="hideclass" id="parent">
  <td>Profession</td>
  <td colspan="2"><input type="text" name="prof"</td>
</tr>

function select_mem()
{
   var stu= $('input[type="radio"]:checked').val();
   $('.hideclass').css({"display":"none"});
   $('#'+stu).css({"display":"block"});
}