Why clicking on the male radio button does not work?

<div id="m_wrapper">
    <input id="m" type="radio" name="sex" value="male" />Male<br>
</div>
    <input id="f" type="radio" name="sex" value="female" />Female
    <input id="o" type="radio" name="sex" value="other" />Other


$("#m_wrapper").click(function(e){
    $("#m").prop('checked', true); 
    return false;
});

I know that here -> return false is equivalent to call e.preventDefault() AND e.stopPropagation()

However, when I click on the radio button, I have an explicit line setting the property checked to true for the Male radio button. Why will preventDefault() will UNDO something I set?

By the way, clicking anywhere inside 'm_wrapper' checks the radio button. Which makes sense.

I know that removing return false will fix the issue. The question is 'why?'

$("#m_wrapper").click(function(e){
    $("#m").prop('checked', true); 
    return false;
});

<script src=".10.0/jquery.min.js"></script>

<div id="m_wrapper">
    <input id="m" type="radio" name="sex" value="male" />Male<br>
</div>
    <input id="f" type="radio" name="sex" value="female" />Female
    <input id="o" type="radio" name="sex" value="other" />Other

Why clicking on the male radio button does not work?

<div id="m_wrapper">
    <input id="m" type="radio" name="sex" value="male" />Male<br>
</div>
    <input id="f" type="radio" name="sex" value="female" />Female
    <input id="o" type="radio" name="sex" value="other" />Other


$("#m_wrapper").click(function(e){
    $("#m").prop('checked', true); 
    return false;
});

I know that here -> return false is equivalent to call e.preventDefault() AND e.stopPropagation()

However, when I click on the radio button, I have an explicit line setting the property checked to true for the Male radio button. Why will preventDefault() will UNDO something I set?

By the way, clicking anywhere inside 'm_wrapper' checks the radio button. Which makes sense.

I know that removing return false will fix the issue. The question is 'why?'

$("#m_wrapper").click(function(e){
    $("#m").prop('checked', true); 
    return false;
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div id="m_wrapper">
    <input id="m" type="radio" name="sex" value="male" />Male<br>
</div>
    <input id="f" type="radio" name="sex" value="female" />Female
    <input id="o" type="radio" name="sex" value="other" />Other

• javascript
• jquery
• event-handling
• jquery-events

2 Answers 2

This is what happens when you click "Male" input button.

1. Click event on the input makes it checked. Better to say, attempts to make it checked. To actually mit this new state and render it, event must finish its lifecycle without being prevented. However..

2. Event bubbles up the DOM tree and reaches parent div element which has click handler attached to it. This event handler prevents default behaviour, which in case of radio button (and checkbox) is toggling checked state. Calling e.preventDefault() is the same as return false in this case.

3. return false instruction dictates that radio input remained unchecked because according to its initial state after click it should have bee checked (if default was not prevented). So return false forces radio to remain unchecked even though previous line $("#m").prop('checked', true); got it checked.

You don't need to return false when m_wrapper is clicked. The return value of an event handler determines whether or not the default browser behavior should take place. In the case of clicking on links, this would be following the link. As there is no default onclick behavior for a div you can skip it entirely.

$("#m_wrapper").click(function(e) {
  $("#m").prop('checked', true);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="m_wrapper">
  <input id="m" type="radio" name="sex" value="male" />Male<br/>
</div>  

<input id="f" type="radio" name="sex" value="female" />Female
<input id="o" type="radio" name="sex" value="other" />Other