radio button onclick return false remove the checked from the other radio button

Question

I have radio button. I want that onClick on the radio button It will return false. What that happend is that the radio that i change is not checked and it is good . but the other radio button that was checked before. is not checked too. here the code:

 function disableClick(e) { e.preventDefault(); return false; } 

 <input id="fmale" type="radio" name="gender" value="1" checked="checked" onclick="return disableClick(event);"> <input id="male" type="radio" name="gender" value="2" onclick="return disableClick(event);"> 

Answer 1

addEventListener can help you

 function disableClick(e) { e.target.checked = false; // clear current radio button e.preventDefault(); return false; } document.getElementById("fmale").addEventListener("click",disableClick) document.getElementById("male").addEventListener("click",disableClick) 

 <input id="fmale" type="radio" name="gender" value="1" checked="checked" /> <input id="male" type="radio" name="gender" value="2"> 

Answer 2

'e.preventDefault（）'和'return false'阻止检查下一个单选按钮。

Answer 3

e.preventDefault does not prevent the radio button's attribute checked from being set to true . You can console.log(e.target.checked) to see it's set true , even though e.preventDefault() prevents it from visually showing as checked.

The below demo allows the other radio button to automatically be set to checked = false , but then sets the currently clicked on radio to false as well.

I'm not sure why you want to do this, but here you go

Solution

 $('#fmale').click(function(e) { e.target.checked = false; }); $('#male').click(function(e) { e.target.checked = false; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="fmale" type="radio" name="gender" value="1" checked="checked"> <input id="male" type="radio" name="gender" value="2">