Develop Reference

Radio button intercepting unchecked event in Angular/Javascript

I am writing an Angular component which uses radio button (Need to use default radio buttons due to project constraints).
I need to print the value of the radio button (whether it is checked or unchecked). Like following:
<input type="radio" (change)="onUpdate($event)">
<p>{{isActive}}</p>
In the component something like this:
onUpdate(event) {
this.isActive = event.target.checked;
}
But this doesn't work as the change event is not triggered when the radio button is unchecked. Is there any way to intercept the event when the radio button is unchecked?
Please help. I am stuck. Dummy app link here
Edit: What I am trying to do
I am trying to write a custom radio button so that I can styles it on my own. I cannot write a radio-group component. Hence I need a wrapper component around the default one. Something like Stackblitz-link. I need the unchecked event because I have some custom element which has to be notified about this. Any way to achieve this ?

Use a checkbox, style it like a radio button. Seems to be the easiest solution and of course use ng-model instead of onChange.

You could replace (change) with (click), because every click on the radio button is a change anyway.
<input type="radio" (click)="onUpdate($event)">
<p>{{isActive}}</p>
The above is a solution, but I'd use this:
<input type="radio" [(ngModel)]="isActive">
<p>{{isActive}}</p>
It binds your radio button to your isActive property, so it changes dynamically with clicking.

So using two radio buttons got this working for me, let me know if you can model this for your application.
<input type="radio" name="button" [value]="checked" (change)="checked=!checked">
<input type="radio" name="button" [value]="!checked" (change)="checked=!checked">
<p>{{checked}}</p>
I am setting checked to false by default in my component.

Can you please try to adjust this logic with your code? Checking some new radio will uncheck other and we can keep track of this behavior.
<p>
<input type="radio" name="r1" value="one" [(ngModel)]="isActive">
<input type="radio" name="r2" value="two" [(ngModel)]="isActive">
<input type="radio" name="r3" value="three" [(ngModel)]="isActive">
</p>
<p>{{isActive}}</p>
Stackblitz link

selecting radio options doesnt change checked attribute

I am generating an HTML form with some radio buttons and checkboxes. the generated code for the radio buttons for instance are like these:
<input id="101_2" type="radio" name="101" value="2" >
<input id="101_3" type="radio" name="101" value="3" checked="true">
Using JavaScript I can make a for cycle to see what radio is checked using the check attribute.
The problem is that if I manually click in another radio option (from the same group as in the example), visually in the HTML I can see that another radio is selected, but the JavaScript is still saying that the input 101_3 is the selected radio option. If I look at the HTML using firebug I can see that the new selected option is indeed not selected (doesn't have the checked attribute)... despite I have selected manually.
Any ideas on this?

Fist and formost when naming your radio buttons or any type of DOM input element never start the name of an input element with a number, always start the name of your input element with a letter.
For your posted code you would name your radios in similar fashion, one01 or x101 or o101,ect...
Do the same thing with your ids' of any DOM element. Never start an id of a DOM element with a number.
--HTML
<input id="x101_2" type="radio" name="x101" value="2">
<input id="x101_3" type="radio" name="x101" value="3" checked="checked">
<br /><br />
<button type="button" onclick="WhatsChecked()">Whats Checked?</button>
--JavaScript
function WhatsChecked() {
var radCk = document.body.querySelectorAll('input[name="x101"]:checked')[0];
alert(radCk.id);
};
--Fiddler
fiddler

list of radiobutton lists - only allow one to be selected

I have multiple radiobutton lists within a fieldset tag.
I only ever want one item to be selectable from the whole list...
currently i can select one item from each radio button list - which is normal
I know the proper way would to do this would be to have one long radio button list, but that is not an option.
Is there a way in javascript/jquery that given the fieldset class name - say
<fieldset class="mylistofradiolists"> that when a radio button within it is selected all other items are deselected and only that single one remains selected
Thanks

You can do that with the following code
$radios = $('.mylistofradiolists :radio');
$radios.on('change',function(){
$radios.not(this).prop('checked',false);
});
When an radio is selected all other radio's except that are deselected within that container.
It's better to use
$radios = $('.mylistofradiolists [type=radio]');
Instead of
$radios = $('.mylistofradiolists :radio');
As the doc for :radio selector says
Because :radio is a jQuery extension and not part of the CSS
specification, queries using :radio cannot take advantage of the
performance boost provided by the native DOM querySelectorAll()
method.
For better performance in modern browsers, use [type="radio"]
instead.

You can achieve the functionality of selecting only one radio button from list of radio buttons which are seperated by fieldset tag by keeping each "name" attribute of the radio button same.
e.g :- for first field set - keeping the radio button name field same.
<fieldset >
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
<fieldset >
and for second fieldset , keeping the name attribute same :-
<fieldset >
<input type="radio" name="food" /> : Indian<br />
<input type="radio" name="food" /> : UK<br />
<fieldset >
Hope this anser user question :)

How do I make the "value" of the <input type="radio"> invisible?

<input type="radio" value="1" id="baby">
I'd like to keep this code like that.
However, can I apply a CSS to it so that the "1" is not displayed to the user?
Edit: For some reason, it is being displayed, I don't know why.
I do have a CSS attached to it though.

The value of "1" is not displayed to the user at all, it's hidden and only has meaning when the form posts. You need to add a <label> tag or just raw text near the radio button to display the value you want the user to see.

For radio buttons, the value attributed is never rendered by the user agent (unless it does something rather weird). Typically, if you need a radio button with a label, you explicitly specify one, ideally using the <label> tag.

The "1" should not display for the user.. it's just a value..
Normally, you'd declare a radio input like so:
<label><input type="radio" value="1" id="baby"> Baby </label>
This will make "Baby" the label for the radio button, this will also make clicking on the Baby text activate the radio button, which is what accessibility rules would require..

JQuery - Set Attribute value

I have following HTML with two elements having the same name
<input type="hidden" name= "chk0" value="">
<input type="checkbox" name="chk0" value="true" disabled>
Through JQuery, I want to set the enable the checkbox. So, I am using something like this:
$('#chk0').attr("disabled",false);
But this doesn't work. I assume JQuery is getting confused with two elements having the same identical name. Unfortunatel, I cannot avoid using two different names because, when the form is posted, I want all the checkboxes to get posted (not just the ones that are checked). Hence I have to use hidden element with the same name.. So, back to the question, how can I enable the checkbox through JQuery in the above scenario? Is there a "type" parameter for attr which distingues hidden from checkbox?
Thanks

Some things before the actual code..
the hash (#) you use as the selector is for IDs and not for names of elements.
also the disabled attribute is not a true false scenario .. if it has disabled attribute it means that it is true .. you need to remove the attribute and not set it to false.
Also there are the form selectors that identify specific types of items in a form ..
so the code would be
$("input:checkbox[name='chk0']").removeAttr('disabled');
Bringing the answer up-to-date
You should use the .prop() method (added since v1.6)
$("input:checkbox[name='chk0']").prop('disabled', false); // to enable the checkbox
and
$("input:checkbox[name='chk0']").prop('disabled', true); // to disable the checkbox

Seriously, just don't use jQuery for this. disabled is a boolean property of form elements that works perfectly in every major browser since 1997, and there is no possible way it could be simpler or more intuitive to change whether or not a form element is disabled.
The simplest way of getting a reference to the checkbox would be to give it an id. Here's my suggested HTML:
<input type="hidden" name="chk0" value="">
<input type="checkbox" name="chk0" id="chk0_checkbox" value="true" disabled>
And the line of JavaScript to make the check box enabled:
document.getElementById("chk0_checkbox").disabled = false;
If you prefer, you can instead use jQuery to get hold of the checkbox:
$("#chk0_checkbox")[0].disabled = false;

"True" and "False" do not work, to disable, set to value disabled.
$('.someElement').attr('disabled', 'disabled');
To enable, remove.
$('.someElement').removeAttr('disabled');
Also, don't worry about multiple items being selected, jQuery will operate on all of them that match. If you need just one you can use many things :first, :last, nth, etc.
You are using name and not id as other mention -- remember, if you use id valid xhtml requires the ids be unique.

$("#chk0") is refering to an element with the id chk0. You might try adding id's to the elements. Ids are unique even though the names are the same so that in jQuery you can access a single element by it's id.

Use an ID to uniquely identify the checkbox. Your current example is trying to select the checkbox with an id of '#chk0':
<input type="checkbox" id="chk0" name="chk0" value="true" disabled>
$('#chk0').attr("disabled", "disabled");
You'll also need to remove the attribute for disabled to enable the checkbox. Something like:
$('#chk0').removeAttr("disabled");
See the docs for removeAttr
The value XHTML for disabling/enabling an input element is as follows:
<input type="checkbox" id="chk0" name="chk0" value="true" disabled="disabled" />
<input type="checkbox" id="chk0" name="chk0" value="true" />
Note that it's the absence of the disabled attribute that makes the input element enabled.

You can add different classes to select, or select by type like this:
$('input[type="checkbox"]').removeAttr("disabled");