Stack Overflow Asked by frankfurt on December 23, 2021
i want to ask you. The radio button shouldn’t be unchecked, but I want to make it unchecked.
I have made the code as below, but it still doesn’t work. What is wrong with my code? and please give an example of the code that I have made.
Radio Button code
<input type="radio" id="sidebar_workout_1" value="Hiit_1" name="workout">
<input type="radio" id="sidebar_workout_2" value="Yoga/Flexibility_2" name="workout">
when i click Hiit option the code will be like this
<input type="radio" id="sidebar_workout_1" value="Hiit_1" name="workout" previousvalue="checked">
<input type="radio" id="sidebar_workout_2" value="Yoga/Flexibility_2" name="workout" previousvalue="false">
when i uncheck the Hiit option, code will be like this and check is not lost
<input type="radio" id="sidebar_workout_1" value="Hiit_1" name="workout" previousvalue="false">
<input type="radio" id="sidebar_workout_2" value="Yoga/Flexibility_2" name="workout" previousvalue="false">
My Jquery
$("input[type='radio']").click(function() {
var previousValue = $(this).attr('previousValue');
var name = $(this).attr('name');
if (previousValue == 'checked') {
$(this).removeAttr('checked');
$(this).attr('previousValue', false);
} else {
$("input[name=" + name + "]:radio").attr('previousValue', false);
$(this).attr('previousValue', 'checked');
}
});
In case someone is trying to uncheck radio buttons but using vanilla js, you can achieve that by set radio.checked
to false
.
Here's an example:
<div>
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
</div>
<div>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>
</div>
<button id="btnUncheck">Uncheck</button>
Vanilla js:
document.querySelector('#btnUncheck')
.addEventListener('click', e => {
const radios = document.querySelectorAll('[type="radio"]')
radios.forEach(radio => {
radio.checked = false
})
})
Answered by Nurul Huda on December 23, 2021
Please try to this code
$("input[type='radio']").click(function() {
var previousValue = $(this).attr('previousValue');
var name = $(this).attr('name');
if (previousValue == 'checked') {
$(this).prop('checked', false);
$(this).attr('previousValue', false);
} else {
$("input[name=" + name + "]:radio").attr('previousValue', false);
$(this).attr('previousValue', 'checked');
}
});
Answered by Anil Singh on December 23, 2021
You need to change $(this).removeAttr('checked');
to $(this).prop('checked', false);
Answered by dave on December 23, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP