javascript - ajax 和复选框

Question

请帮帮我，我有收音机

<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
<div class="content">
      <div id="male">male contetn</div>
      <div id="female">femalecontetn</div>
</div>

当我单击单选值时，我想使用 ajax，男性将显示 div id =male 并隐藏 id="female"，当我单击单选值时，女性将显示 div id =female 并隐藏 id=male

太谢谢了

Answer 1

在行动中看到它。

HTML

<input type="radio" name="sex" value="male" id="sex_male" /> Male<br />
<input type="radio" name="sex" value="female" id="sex_female" /> Female
<div class="content">
      <div id="male">male contetn</div>
      <div id="female">femalecontetn</div>
</div>

Javascript

function show(el) {
  el.style.display = "";
}
function hide(el) {
  el.style.display = "none";
}

document.getElementById("sex_male").onclick = function() {
  show(document.getElementById("male"));
  hide(document.getElementById("female"));
}

document.getElementById("sex_female").onclick = function() {
  show(document.getElementById("female"));
  hide(document.getElementById("male"));
}

Answer 2

如果您可以使用 jquery，这里是代码：

$(document).ready(function () {
        $("#sex_male").click(function () {
            toggleVisibility(true);
        });
        $("#sex_female").click(function () {
            toggleVisibility(false);
        });
    });
    function toggleVisibility(isMale) {
        if (isMale) {
            $("#sex_female").hide();
            $("#sex_male").show();
        }
        else {
            $("#sex_male").hide();
            $("#sex_female").show();
        }
    }

我的帖子上面的代码示例也应该可以工作。不过，您可能加载得太早了。如果你把它放在页面的底部，它应该可以工作。