Аякс и флажок

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 и hide id = "female", а когда я нажму значение радио женскоепокажет div id = женский и скрыть id = мужской

Большое спасибо

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

Также пример кода выше моего поста должен работать.Вы вероятно загружаете это слишком рано все же.Если вы положите его внизу страницы, оно должно работать.