I have the following radio group.
<input type="radio" name="GROUP1" ng-checked="true" ng-model="group1" id="name1" value="one">
<input type="radio" name="GROUP1" ng-checked="false" ng-model="group1" id="name2" value="two">
<input type="radio" name="GROUP1" ng-checked="false" ng-model="group1" id="name3" value="three">
When a radio input is clicked, I want to be able to figure out if, before it was clicked, if it originally active or not.
For example, if I clicked on #name1, it would respond back true because it was already checked.
If I clicked on #name3, it would respond back false because #name1 was originally selected. But if I click on #name3 again, it would return back true.
Could anyone help me with this?
You can watch this code in your controller.
Now, whenever your model will be changed(in the ui or in the controller), this event will be raised.
$scope.$watch('group1', function (newValue, oldValue) {
//Place your code here ...
// You have access to the old and to the new Value
});
Just for your information, try to use at least watches as you can...
js:
if(this.checked){
alert("selected");
}else{
this.checked=true;
}
put this code in a function and call it in onClick event of radio button
Related
I have a checkbox and two radio button.
On change event of one of the radio, I am making checked attribute of checkbox true.
It works only once.
Demo
Step to replicate it,
1. click on ugly (checkbox is checked)
2. uncheck the checkbox
3.toggel btw ugly and good(no effect :(
Spent a lot of time on this, but couldn't figure out what's going on.
Update your code as follows:
Use prop() method instead of attr() method to update the checked property.
Bind change event handler commonly and update the property based on selected radio button value.
// or select based on the name attribute
// `$('input[type=radio][name="gender"]')`
$('input[type=radio]').on('change', function() {
$('.xyz').prop('checked', this.value == 'bad');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Car" class="xyz"> I have a car<br>
<input type="radio" name="gender" value="good"> Good Oned<br>
<input type="radio" name="gender" value="bad"> Ugly<br>
Try this if condition .clicked radio button value is bad the clicked true are else false appear in checked attr .You should use prop() method instead of attr
updated
Why not working?
you selector was wrong .you have $('input[type=radio][value = "bad"]') .its select only value bad radio
button not for both .So only if you click other radio button the
checkbox was not unchecked
$(document).ready(function() {
$('input[type=radio]').on('change', function() {
$('.xyz').prop('checked', $(this).val().trim() == 'bad');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Car" class="xyz"> I have a car<br>
<input type="radio" name="gender" value="good"> Good Oned<br>
<input type="radio" name="gender" value="bad"> Ugly<br><br>
I have a checkout page with two radio buttons one for 'Register Account' and 'Guest Account' checkout methods.
I want a single checkbox that when it is checked, it checks the Register Account radio button and when it isn't checked it checks the Guest Account checkout radio button.
Here is my code so far:
http://jsfiddle.net/hQbpZ/160/
HTML:
Remember Me for Future Purposes :<input type="checkbox" id="checkbox1"/> <br/><br/>
Register Account :<input type="radio" id="radio1" name="radio"/><br>
Guest Checkout :<input type="radio" id="radio2" name="radio"/><br>
JS:
jQuery('#checkbox1').click(function(){
jQuery('#radio1').attr('checked', true);
});
jQuery('#checkbox1').click(function(){
jQuery('#radio2').attr('checked', false);
});
I got part of the functionality down but I don't know how to uncheck a radio button when a checkbox is unchecked.
You can do it like this:
jQuery('#checkbox1').click(function () {
jQuery('#radio1').prop('checked', $(this).is(':checked'));
jQuery('#radio2').prop('checked', !$(this).is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Remember Me for Future Purposes :
<input type="checkbox" id="checkbox1" />
<br/>
<br/>Register Account :
<input type="radio" id="radio1" name="radio" />
<br>Guest Checkout :
<input type="radio" id="radio2" name="radio" />
<br>
Just add a toggle variable and link the checked attribute to it
http://jsfiddle.net/hQbpZ/163/
var registered = false;
jQuery('#checkbox1').click(function(){
registered = !registered
jQuery('#radio1').attr('checked', registered);
jQuery('#radio2').attr('checked', !registered);
});
It is impossible to manually uncheck radio buttons, simply because they're not meant to be used that way (read more). The only way to have a radio button uncheck is by creating multiple radio buttons sharing the same name tag, meaning your HTML is already correct.
Your JavaScript does need some changes. It is not necessary to bind a function twice to the same event, so you could reduce it to one binding. Inside that binding you check whether the clicked checkbox is now on or off, and depending on that you check one of the two radio buttons, like so:
$('#checkbox1').click(function() {
if($('#checkbox1').prop('checked') === true) {
$('#radio1').attr('checked', true);
} else {
$('#radio2').attr('checked', false);
}
});
Proceed </button>
<input type="checkbox" name="checkbox3" value="yes">
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
I have a checkbox and a button which will take me to next page. But, before I press the button the check box has to be ticked. If not, a label has to be displayed below the check box saying "accept to rules first". Help? Also, it would be great if i can highlight the checkbox to red if i click proceed without checking the checkbox. Can use javascript/jquery.
Try this it works
<form action="page.html">
<input type="checkbox" name="checkbox3" value="yes" required>
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
<input type="submit" name ="submit"/>
</form>
To get you started:
<input id="checkboxAgree" type="checkbox" name="checkbox3" value="yes">
function checkAgree()
{
if (document.getElementbyId("checkboxAgree").getAttribute("checked") )//checkbox is checked
{
location.href = "page.html"; //load the next page.
}
else
{
Alert("You need to check the box before you can continue");
}
}
document.getElementById("proceed-button").addEventListener("click", checkAgree ,false);
addEventListener add an onclick event to the button. When clicked this executes the function checkAgree. When the checkbox has the attribute checked it is checked and the ifwill render true. location.href will load page.html.
Please delete the a that surrounds your button.
I have a variable called category that must change its value according to the selected radio button. The problem is that I do not get that at the click of a radio button or another, the value will change instantly.
This is the code I have:
<form>
<input type="radio" name="category" value="doctor" /> Doctor
<input type="radio" name="category" value="police" checked /> Policia
</form>
var category = $('[name="category"]:checked').val();
I need you to automatically change the value of the variable category when you click the radio buttons.
Attach an event handler to the change event:
$(':radio[name="category"]').change(function() {
var category = $(this).filter(':checked').val();
});
You need to change the value of category every time a user changes the selected radio button. Therefore you will need an event to trigger when the user clicks on a radio. You can check out the FIDDLE
var category = null;
$("input[name='category']").click(function() {
category = this.value;
});
I think you need simply something like this:
var category;
$('radio[name="category"]').click(function(){
category=this.value;
});
var category;
$(':radio[name="category"]').change(function() {
category=this.value;
});
And this is a jsfiddle.net demo.
You shouldn't give the same ID for more than one element, you should use class instead like this :
<form>
Option 1<input type="radio" name="opt" class="radio" value="Option 1">
Option 2<input type="radio" name="opt" class="radio" value="Option 2">
</form>
instead of :
<form>
Option 1<input type="radio" name="opt" id="radio" value="Option 1">
Option 2<input type="radio" name="opt" id="radio" value="Option 2">
</form>
and your code still the same and it should work fine :)
Instead of using category variable use $('[name="category"]:checked').val() wherever you want the value of the checked radio button. Otherwise you can make use of change or click event to set the checked radio buttons value into category variable.
utilize the .change() in order to capture the change event for a radio button.
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
});