admin管理员组文章数量:1325374
I'm trying to uncheck a radio button wrapped with a label in a button group like this:
<div>
<label class="btn btn-primary">
<input type="radio" name="radio1" class="radio1" />
Radio1
</label>
</div>
<div>
<label class="btn btn-primary">
<input type="radio" name="radio2" class="radio2" />
Radio2
</label>
</div>
$('.btn').on('click', function(e) {
// Check if another option was previously checked
if ($(this).parent().parent().find(':radio:checked').length == 1) {
inner_input = $(this).find('input');
if (inner_input.prop('checked')) {
e.stopImmediatePropagation();
e.preventDefault();
inner_input.prop('checked', false);
$(this).removeClass('active');
}
});
Unfortunately it doesn't work and the label is still active even after the second click.
I'm trying to uncheck a radio button wrapped with a label in a button group like this:
<div>
<label class="btn btn-primary">
<input type="radio" name="radio1" class="radio1" />
Radio1
</label>
</div>
<div>
<label class="btn btn-primary">
<input type="radio" name="radio2" class="radio2" />
Radio2
</label>
</div>
$('.btn').on('click', function(e) {
// Check if another option was previously checked
if ($(this).parent().parent().find(':radio:checked').length == 1) {
inner_input = $(this).find('input');
if (inner_input.prop('checked')) {
e.stopImmediatePropagation();
e.preventDefault();
inner_input.prop('checked', false);
$(this).removeClass('active');
}
});
Unfortunately it doesn't work and the label is still active even after the second click.
Share Improve this question edited Jul 1, 2022 at 16:43 Jonas 129k102 gold badges327 silver badges405 bronze badges asked Dec 26, 2017 at 22:30 LiorLior 6,05111 gold badges34 silver badges47 bronze badges2 Answers
Reset to default 4The solution in current answer works well for radio inputs. But it didn't work for button groups. To save other searchers of trouble, following code might be helpful:
$('label').click(function(e) {
e.preventDefault();
var radio = $(this).find('input[type=radio]');
if (radio.is(':checked')) {
e.stopImmediatePropagation();
$(this).removeClass("active");
radio.prop('checked', false);
} else {
radio.prop('checked', true);
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary active">
<input type="radio" name="options" id="option1" autoplete="off" checked>
option 1
</label>
<label class="btn btn-outline-secondary">
<input type="radio" name="options" id="option2" autoplete="off">
option 2
</label>
<label class="btn btn-outline-secondary">
<input type="radio" name="options" id="option3" autoplete="off">
option 3
</label>
</div>
Why this happens?
Let's first see what are click
, mouseup
and mousedown
events :
mousedown
Fires when the user depresses the mouse button.
mouseup
Fires when the user releases the mouse button.
click
Fires when a mousedown and mouseup event occur on the same element. Fires when the user activates the element that has the keyboard focus (usually by pressing Enter or the space bar).
So When using click
event, the radio button is checked, it means that radio.is(':checked')
will always return true
unless you disable default behavior. So you can do what you want in 2 ways :
1- With Mouseup
event, in this case you can determine the state of radio button wether it's checked or not.But in this way you need one little extra code to disable the default behvaior of click
event
$('label').on('mouseup', function(e){
var radio = $(this).find('input[type=radio]');
if( radio.is(':checked') ){
radio.prop('checked', false);
} else {
radio.prop('checked', true);
}
});
// Disable default behavior
$('label').click(function(e){
e.preventDefault();
});
Fiddle
And 2 , You can wrap it all together, disable click
's default behavior and do the rest in one event:
$('label').click(function(e) {
e.preventDefault();
var radio = $(this).find('input[type=radio]');
if (radio.is(':checked')) {
radio.prop('checked', false);
} else {
radio.prop('checked', true);
}
});
Fiddle
I did answer this question using 2 different events with a purpose, sometimes in more plex problems you may be forced to use the mouseup
event instead of click
本文标签: javascriptUncheck bootstrap radio buttonStack Overflow
版权声明:本文标题:javascript - Uncheck bootstrap radio button - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742192660a2430501.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论