javascript jquery radio button click - javascript

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
});

Related

Checkbox not getting checked after radio button change event

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>

Find out if radio option is checked before it was clicked

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

How to use .change() check on only part of a page

I have a bunch of html check boxes on a page, but want to have two different groups of checkboxes. I'm thinking that I can assign them into a class or insert them into a div, so that I can somehow refer to them separately...? Just unsure how to do this syntaxically.
For example, currently I'm using
$('input[type=checkbox]').change(function(){ /*insert my code functionality here*\ });
to refer to the checkboxes, but this changes all of my checkboxes, when I only want it to apply to half of them.
You may try this
HTML
<input type="checkbox" value="1" class="group1" name="chk1" />Check One
<input type="checkbox" value="2" class="group1" name="chk2" />Check Two
<input type="checkbox" value="3" class="group2" name="chk3" />Check One
<input type="checkbox" value="4" class="group2" name="chk4" />Check Two​
JS
$('input[type=checkbox].group1').change(function(){
// code
});
$('input[type=checkbox].group2').change(function(){
// code
});
An Example Here.
Use classes to separate them into two groups..
.tobechecked // Assign a class to all the checkboxes that need to
// for this event
$('.tobechecked').change(function(){
Identify the groups by diferent classes, then you can determine it by the class via jquery.
$('.specific_group_class').change(function(){..}
Like you said in your question, use classes.
Then you can do as such:
$(".check-1, .check-2").change(function(e) {
/* do work */
});
See jsFiddle

Radio Button Onclick Event Requires Two Clicks to Fire/Execute on Firefox

Hoping someone has a solution to this weirdness on Firefox 3.
I basically have 3 radio buttons and 3 text input fields (see following code):
<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked" onclick="SetVals();" />
<input type="text" name="text1" id="text1" />
<input type="radio" name="group1" id="custom" value="custom_img" onclick="SetVals();" />
<input type="text" name="text2" id="text2" />
<input type="radio" name="group1" id="vector" value="vector_img" onclick="SetVals();" />
<input type="text" name="text3" id="text3" />
Now, every time I click on a specific Radio Button, the text input elements for the other two buttons should get cleared and also become disabled (see following code).
function SetVals() { // using JQuery + straight JS for this...
$(document).ready(function() {
$(":radio").click(function(event) {
// use event.target to determine which radio button was clicked
if (event.target.id=="preloaded") {
document.getElementByID("text1").disabled=false;
$("#text2").val("");
$("#text3").val("");
document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;
} else if (event.target.id=="custom") {
document.getElementByID("text2").disabled=false;
$("#text1").val("");
$("#text3").val("");
document.getElementById("text1").disabled=true;
document.getElementById("text3").disabled=true;
} else if (event.target.id=="vector") {
document.getElementByID("text3").disabled=false;
$("#text1").val("");
$("#text2").val("");
document.getElementById("text1").disabled=true;
document.getElementById("text2").disabled=true;
}
});
});
}
Also, when the page is initially loaded, the text2 and text3 input fields are disabled via javascript as the text1 field is checked by default:
document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;
The problem I'm having is that it requires 2 (two) clicks to get this to work on Firefox. On Internet Explorer, it works as expected.
So, when clicking on a radio button the first time - nothing happens. When clicking on it a second time, that's when the Onclick Event is triggered.
NOTE: I'm using JQuery for this, but have also used straight Javascript to no avail.
You can simply copy and paste my code on an editor and open the page with Firefox to see issue firsthand.
Has anybody else encountered this? Is it some sort of Firefox bug? If so, is there a work-around?
Any and all help, comments, suggestions, and input are welcome.
Thanks in advance!
Since you are using jQuery to assign the event handler for the radio button click, you can remove the onClick attribute.
This should work for you:
$(function() {
$(":radio").click(function(event) {
if (this.id == "preloaded") {
$("#text1").removeAttr("disabled");
$("#text2, #text3").val("").attr("disabled", true);
} else if (this.id == "custom") {
$("#text2").removeAttr("disabled");
$("#text1, #text3").val("").attr("disabled", true);
} else if (this.id == "vector") {
$("#text3").removeAttr("disabled");
$("#text1, #text2").val("").attr("disabled", true);
}
});
$("#text2, #text3").val("").attr("disabled", true);
});
Code example on jsfiddle.
Side note: since you are using jQuery you might as well use jQuery for almost all dom interactions since mixing the two will eventually lead to some pain. Let jQuery hide the inconsistencies in browsers.
You started using jQuery, and then returned to vanilla JavaScript... but you mis-typed the getElementById() function.
I would stick with jQuery if you have it, it will avoid IE bugs with this particular method too.
Cleaner HTML
<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked"/>
<input type="text" name="text1" id="text1"/>
<input type="radio" name="group1" id="custom" value="custom_img"/>
<input type="text" name="text2" id="text2"/>
<input type="radio" name="group1" id="vector" value="vector_img"/>
<input type="text" name="text3" id="text3"/>
and the jQuery...
$(document).ready(function(){
//bind the click event to the radio buttons
$(':radio').click(function(){
var radioID = $(this).attr('id');
if(radioID == 'preloaded'){
$('#text1').removeAttr('disabled');
$('#text2, #text3').val('').attr('disabled','disabled');
} else if(radioID == 'custom'){
$('#text2').removeAttr('disabled');
$('#text1, #text3').val('').attr('disabled','disabled');
} else if(radioID == 'vector'){
$('#text3').removeAttr('disabled');
$('#text1, #text2').val('').attr('disabled','disabled');
}
});
});
You could try the .change() event handler. I think that could work better.
EDIT: There are issues with the .change() event and IE.

Example need for ajax, where on selecting a radio button will dynamically produce drop down

Example need for ajax, where on selecting a radio button will dynamically produce drop down
If you use or can use jQuery, this is the way I would do it:
Having this HTML:
<input type="radio" name="myradio" value="foo" />
<input type="radio" name="myradio" value="bar" />
<input type="radio" name="myradio" value="baz" />
and assuming you have a page "your_page.php" that returns the list to populate the drop down as JSON, do this:
$("input[#name='myradio']").change(function(){
var selected_value = $("input[#name='myradio']:checked").val();
$.getJSON("your_page.php", { value: selected_value }, populate_dropdown);
});
function populate_dropdown(items) {
// "items" is the ajax-loaded list based on the selected radio button.
// Clear the drop down, populate it and show it if hidden.
}
could you explain yourself a little more?
You need an example where if you click on a radio button and select is showing?
if yes you don't need ajax.
My radio: <input type="radio" name="YOUR_RADIO" onclick="document.getElementById('selectfield').style.display='';" />
<div id="selectfield" style="display:none">
<select><option>option</option></select>
</div>
good luck ...

Categories

Resources