ajax and check box

Pleas help me I had a to radio

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

I want use ajax when i click radio value male will show div id =male and hide id="female" and when i click radio value female will show div id =female and hide id=male

Great Thanks

---

See it in action.

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

---

If you can use jquery here is the code for that:

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

Also the code example above my post should work. You are probably loading it too early though. If you put it at the bottom of your page it should work.