How can I remove checked input radio if a div has the click effect?
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<div id="remover">
<p>Remover checked de radio selecinado</p>
</div>
</body>
</html>
When the div with "remove" id has a click remove input checked effect.
This will solve your problem:
<div id="remover" onclick="$('input[name=gender]').prop('checked', false);">
Or:
$( "#remover" ).click(function() {
$('input[name=gender]').prop('checked', false);
});
EDIT - Possible to solve the problem with pure javascript:
<div id="remover" onclick="removerChecked();">
<script>
function removerChecked() {
var ele = document.getElementsByName("gender");
for(var i=0;i<ele.length;i++){
ele[i].checked = false;
}
}
</script>
You can reset form (deselecting everything) using .reset() with a simple code (if form has only radio buttons ):
$("#remover").click(function(){
$("form")[0].reset();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formaction="">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<div id="remover">
<p>Remover checked de radio selecinado</p>
</div>
document.querySelector("#remover").addEventListener("click", ()=>{
document.querySelector("form").reset();
});<form action="">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<div id="remover">
<p>Remover checked de radio selecinado</p>
</div>