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

How to expand/collapse list of information in a webpage using a link

I am new to web programming and wants to create a link that will expand and collapse a list of information. I was able to do this using radio buttons as shown in the following example bellow.
Instead of using a radio button or a regular button, can you please tell me how can I achieve this same feature using a clickable link. Ex: + More
Please show me with an example if possible.
<script type="text/javascript">
function OnChangeCheckbox1 (checkbox) {
if (checkbox.checked) {
document.getElementById(checkbox.name).style.display = 'none';
document.getElementById(checkbox.id).style.display = 'none';
}
}
function OnChangeCheckbox2 (checkbox) {
if (checkbox.checked) {
document.getElementById(checkbox.name).style.display = 'block';
document.getElementById(checkbox.value).style.display = 'block';
}
}
</script>
* Some Information about X<br>
<label class="radio"><input id="id_clasification2" type="radio" name="moreid1" value="lessid1" onclick="OnChangeCheckbox2 (this)" />+ More</label>
<span style="display:none" id="moreid1" ><label for="id_advisor">First some text<br>First more text</label></span>
<label style="display:none" class="radio" id="lessid1"><input id="lessid1" type="radio" name="moreid1" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label>
<br><br>
* Some Information about Y<br>
<label class="radio"><input id="id_clasification2" type="radio" name="moreid2" value="lessid2" onclick="OnChangeCheckbox2 (this)" > + More</label>
<span style="display:none" id="moreid2" ><label for="id_advisor">Second Some text<br>Second more text</label></span>
<label style="display:none" class="radio" id="lessid2"><input id="lessid2" type="radio" name="moreid2" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label>
<br><br><br>
Aditional Information goes here
Working Code: https://jsfiddle.net/hey4769/owpat8zf/

While it's an idea to use value/name/id attributes, please be aware this does not work for all elements. Also name attribute (at least for some elements) is deprecated in html5.
So I've chosen to use data attributes. And, as I'm spoiled with using jQuery, I decided to test some things in javascript, and included 2 different functions, one using this and another passing the event.
For selecting the elements to show/hide I've used document.querySelector, which works like a css selector.
I'm also changing the text on the a element after clicking it. Last I've added some console logs. Hope it's useful!
https://jsfiddle.net/hamu21gj/

you can you href to add your javascript like this:
href="javascript:MyFunction"
I changed your code a little bit just to make an example.
https://jsfiddle.net/owpat8zf/3/

jQuery Mobile click event.preventDefault does not seem to prevent change

I am trying to prevent a radio button from changing when a use clicks, it works when using standard jQuery but when you include jQuery Mobile it does not seem to work, is there something else I have to do in jQuery Mobile?
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="trade-direction" id="buy" value="B" checked="checked" />
<label for="buy">Buy</label>
<input type="radio" name="trade-direction" id="hold" value="H" />
<label for="hold">Hold</label>
<input type="radio" name="trade-direction" id="sell" value="S" />
<label for="sell">Sell</label>
</fieldset>
$('[name="trade-direction"]:radio').click(function(event) {
if(!confirm("Do You Want To Change?")) {
event.preventDefault();
}
});
below is a link to the code in jsFiddle.
http://jsfiddle.net/mikeu/xJaaa/

The problem is that with jQuery.Mobile, the element that is effected by the UI change is not the input element. In fact, the radio element isn't actually clicked at all. The Element that is clicked is <div class="ui-radio">. If you want to bind to the radio input itself, you need to use the change event, but in this case it won't work for you, because the function gets called after the change has already taken place.
What you need is something like this:
// Probably a good idea to give your fieldset an ID or class
$('fieldset').delegate('.ui-radio','click',function(event){
if(!confirm("Do You Want To Change?")) {
event.stopImmediatePropagation();
event.preventDefault();
}
})
The event.stopImmediatePropagation() prevents the the .ui-radio from triggering the click event to the input, and the event.preventDefault prevents the default action. The stopImmediatePropagation may not be necessary, but it gives an added guarantee that may be helpful across different browsers.

jQuery stopPropagation not effective

I'm just completely stumped, I looked over a lot of the similar questions but I can't figure out why this click event keeps propagating.
Here is the code:
$("#view-radio").buttonset().bind('click', function(e) {
redraw(Testimonials);
e.stopPropagation();
});
Here is the radio buttons
<div id="view-radio" class="i-obj buttonset">
<input type="radio" id="gridradio" name="view-radio" checked="checked" value="grid" />
<label for="gridradio"> <img src="http://SwolePersonalTraining.com/beta/wp-content/themes/striking/images/gridview.jpg" class="icon">Grid View</label>
<input type="radio" id="listradio" name="view-radio" value="list" />
<label for="listradio"><img src="http://SwolePersonalTraining.com/beta/wp-content/themes/striking/images/listview.jpg" class="icon">List View</label>
</div>
You can find the page in action here: http://swolepersonaltraining.com/beta/?page_id=380
Here is the complete code: http://swolepersonaltraining.com/beta/wp-content/themes/striking/js/custom/custom_testimonial.js?ver=3.1.3
Any ideas?

I can't swear it because it's difficult to test in your live site, but I think that what's happening is that you bound the click event of the view-radio div instead of each of the two radio buttons inside it.
I'd try something like:
$("#view-radio").buttonset(). // Turn radio buttons of the div in a buttonset
find('input').bind('click', // Bind the click event of each of the two radios
....
EDIT:
Yes! It works!
http://jsfiddle.net/marcosfromero/TDsrj/
And stopPropagation isn't needed (read other answers to know why).

javascript jquery radio button click

I have 2 radio buttons and jquery running.
<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second
Now, with a button I can set onClick to run a function. What is the way to make radio buttons run a function when I click on one of them?

You can use .change for what you want
$("input[#name='lom']").change(function(){
// Do something interesting here
});
as of jQuery 1.3
you no longer need the '#'. Correct way to select is:
$("input[name='lom']")

If you have your radios in a container with id = radioButtonContainerId you can still use onClick and then check which one is selected and accordingly run some functions:
$('#radioButtonContainerId input:radio').click(function() {
if ($(this).val() === '1') {
myFunction();
} else if ($(this).val() === '2') {
myOtherFunction();
}
});

<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>
$("input[name='radio']:checked").val()

this should be good
$(document).ready(function() {
$('input:radio').change(function() {
alert('ole');
});
});

There are several ways to do this. Having a container around the radio buttons is highly recommended regardless, but you can also put a class directly on the buttons. With this HTML:
<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>
you can select by class:
$(".shapeButton").click(SetShape);
or select by container ID:
$("#shapeList").click(SetShape);
In either case, the event will trigger on clicking either the radio button or the label for it, though oddly in the latter case (Selecting by "#shapeList"), clicking on the label will trigger the click function twice for some reason, at least in FireFox; selecting by class won't do that.
SetShape is a function, and looks like this:
function SetShape() {
var Shape = $('.shapeButton:checked').val();
//dostuff
}
This way, you can have labels on your buttons, and can have multiple radio button lists on the same page that do different things. You can even have each individual button in the same list do different things by setting up different behavior in SetShape() based on the button's value.

it is always good to restrict the DOM search. so better to use a parent also, so that the entire DOM won't be traversed.
IT IS VERY FAST
<div id="radioBtnDiv">
<input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
<input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>
$("input[name='myButton']",$('#radioBtnDiv')).change(
function(e)
{
// your stuffs go here
});