Отображение текста по переключателю

Question

Я пытаюсь создать функцию сценария, которая отображает текст, когда пользователь нажимает на переключатели, чтобы выбрать свой пол.Поэтому, когда пользователь нажимает на женщину, появляется текст «Привет, мэм», а когда мужчина нажимает, возвращается «Здравствуйте, сэр».Любые предложения высоко ценятся:)

Я использовал этот сценарий:

    <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

Вы можете использовать событие при изменении.Этот фрагмент кода должен помочь вам.

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

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