javascript - 想用一个单选按钮显示一个特定的行选择并隐藏另一个

Question

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

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

我尝试使用这个 java 脚本

function select_mem()
{
    var stu= $('input:radio[name=member]:checked').val();
    document.write(stu);

}

在这里，我试图获得 stu 值，看看我会得到什么，然后我可以输入 if 条件。请帮我怎么做

score 0 · Accepted Answer

工作JSFiddle

工作代码：

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

我所做的只是

if()对选中的单选按钮的值进行操作
隐藏/显示里面的行if()正文内的行
- 为了隐藏\显示行，我class为每一行指定并对其调用.show()和.hide()方法。

score 0 · Accepted Answer

保留两个部分的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>

查询：

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

score 0 · Accepted Answer

这应该有帮助

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

score 0 · Accepted Answer

您可以从 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>

并更改您的 JS，以绑定单击事件处理程序：

// Add this piece of script to the page header. Inline, or add to your JS file (preferably).
// On page load, it will attach the handler to the click event. Which means, the code will be executed every time the radio buttons are clicked.
$(function () {
    $("input:radio[name=member]").on("click", function () {
        $("#class").toggle($(this).val() == "student");
        $("#profession").toggle($(this).val() == "parent");
    });
});

看到它工作：http: //jsfiddle.net/R4gej/

更新

由于您似乎在使用此解决方案时遇到问题，因此您可以在下面找到应该放置在页面中的整个代码，包括 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 库？您是否将这段脚本加载到正确的位置？这比这里解释的要多。对不起，但我没有看到任何其他方式可以帮助你。

检查以下图像以查看它是否有效：

步骤1

第2步

第 3 步

score 0 · Accepted Answer

尝试这个

<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();
          }
  });
});

score 0 · Accepted Answer

而不是click使用.on('change')事件处理程序。

$(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();
        }

    });
});

javascript - 想用一个单选按钮显示一个特定的行选择并隐藏另一个

6 回答 6

Related

Reference