Question

我正在尝试制作一个脚本功能，当用户点击单选按钮选择他/她的性别时，该功能会显示文本。因此，当用户点击女性时，文字“你好，我就是”。出现，当点击男性时，你好先生＆＃39;退回。任何建议都非常感谢：）

我使用过这个脚本：

    <script>          
function myFunction() {                
    var checkBox = document.getElementById("myCheck");
    var text = document.getElementById("text");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
        text.style.display = "none";
    }
}
</script>

<label for="gender"><b>Gender</b></label>
<form action="">
    <input type="radio" id="myCheck" name="gender" value="male" onclick="myFunction()">Male
    <p id="text" style="display:none">Hello sir :)</p>


    <input type="radio" id="myCheck" name="gender" value="female" onclick="myFunction()">Female
    <p id="text" style="display:none">Hello ma'am :)</p>

但是只有其中一个可以工作，例如在这种情况下，只有当按下Male时才会工作，因为它是代码中写的第一个。

Answer 1

您可以使用on change事件。此代码段可以帮助您。

＆＃13;

$('input[name="gender"]').change(function() {
  alert("Hello " + $(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>Choose your gender:</strong>
<form name="genderForm">
  <label>
    <input type="radio" name="gender" value="Sir" />
    Male
  </label>
  <label>
    <input type="radio" name="gender" value="Ma'am" />
    Female
  </label>
</form>

＆＃13;

单击单选按钮上的文本显示

1 个答案: