I have some radio buttons and I am adding checked attribute to selected radio button but having one problem. I want to remove checked="checked" attribute from radio button which selected.
HTML Code:
<div class="tabtwo-info">
<div class="tab-two">
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Unsecured Loans
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Secured 2nd Charge Lending
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Overdrafts
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Trade Finance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Business Cash Advance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Working Capital
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Stock Finance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Acquisition Finance
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
</div>
</div>
jQuery Code:
$(".tabtwo-info .brokersector").click(function () {
$(this).find('input:radio').attr('checked', true);
});
My JSFiddle: /
JSFiddle Screenshot:
I have some radio buttons and I am adding checked attribute to selected radio button but having one problem. I want to remove checked="checked" attribute from radio button which selected.
HTML Code:
<div class="tabtwo-info">
<div class="tab-two">
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Unsecured Loans
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Secured 2nd Charge Lending
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Overdrafts
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Trade Finance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Business Cash Advance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Working Capital
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Stock Finance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Acquisition Finance
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
</div>
</div>
jQuery Code:
$(".tabtwo-info .brokersector").click(function () {
$(this).find('input:radio').attr('checked', true);
});
My JSFiddle: https://jsfiddle/jj57q8fs/
JSFiddle Screenshot:
Share Improve this question edited May 5, 2015 at 12:17 Manan asked May 5, 2015 at 12:03 MananManan 1,1954 gold badges16 silver badges25 bronze badges 14- 1 add a jsFiddle please – Joe Fitter Commented May 5, 2015 at 12:04
- 2 You don't need to do this - by setting one as selected the others are automatically de-selected. There is no JS required. – Rory McCrossan Commented May 5, 2015 at 12:05
-
@JoeFitter I have added jsfiddle.
https://jsfiddle/jj57q8fs/– Manan Commented May 5, 2015 at 12:07 - What is the problem? It is anyways unchecking the previous radios. – Shaunak D Commented May 5, 2015 at 12:08
-
@ShaunakD Check my JSFiddle.
checked="checked"is not removing when I checked to another radio button. – Manan Commented May 5, 2015 at 12:11
4 Answers
Reset to default 6To force a remove of the attribute, before checking a new:
$(".brokersector").click(function () {
$('input[type=radio]').removeAttr('checked');
$(this).find('input[type=radio]').attr('checked', 'checked');
});
This will force an removal of all checked on any radio button, before a new radio is set. The selector can be more specific of course, like in Idir's example.
Also, @Regent posted a fiddle using prop instead. I would suggest you use this, as it states in the documentation:
Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does.
try this,
$(".tabtwo-info .brokersector").click(function() {
$('input[name=brokersector]').removeAttr('checked');
$(this).find('input:radio').attr('checked', 'checked');
});I agree with [Rory McCrossan][1], you don't need jQuery for that. but here is what you can do this:
$('input[name=brokersector]:checked').removeAttr('checked');
$(".tabtwo-info .brokersector").click(function () {
$("input:radio").removeAttr("checked");
$(this).find('input:radio').attr('checked', true);
});
});