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>

Java脚本

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

我的帖子上面的代码示例也应该起作用。 不过，您可能加载得太早了。 如果将其放在页面底部，则应该可以使用。