fire an action when you check a radio button - javascript

Here's my HTML, where I have two radio buttons. The default checked button is the "lease" button.
<input
id="quotation_request_payment_option_lease"
class="choose_payment_option"
name="quotation_request[payment_option]"
type="radio"
value="lease"
checked="checked">
<input
id="quotation_request_payment_option_finance"
class="choose_payment_option"
name="quotation_request[payment_option]"
type="radio"
value="finance">
What I want to do is, when the lease button is checked, print "lease" to the console. And when "finance" is checked, print "finance" to the console.
I've tried various things to no avail.
This doesn't work:
$(document).ready(function() {
$('input[type=radio[name='quotation_request[payment_option]']').change(function() {
if (this.value == 'lease') {
console.log("lease");
}
else if (this.value == 'finance') {
console.log("finance");
}
});
});


$(document).ready(function() {
$(":radio[name='quotation_request[payment_option]']").change(function() {
if (this.value == 'lease') {
console.log("lease");
} else if (this.value == 'finance') {
console.log("finance");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="quotation_request_payment_option_lease" class="choose_payment_option" name="quotation_request[payment_option]" type="radio" value="lease" checked="checked"/>
<input id="quotation_request_payment_option_finance" class="choose_payment_option" name="quotation_request[payment_option]" type="radio" value="finance" />
Change your selector like above.
You can use :radio to select radio buttons


Run the snippet to see the change in the console
$('input[type=radio]').change(function() {
console.log( $(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
id="quotation_request_payment_option_lease"
class="choose_payment_option"
name="quotation_request[payment_option]"
type="radio"
value="lease"
checked="checked">
<input
id="quotation_request_payment_option_finance"
class="choose_payment_option"
name="quotation_request[payment_option]"
type="radio"
value="finance"
checked="checked">


In html checkbox add following trigger
onchange="myFunction(this)"
and in my Function
function myFunction(element)
{
//do stuff
}
How about this


Your jquery selector was wrong. It should be
$("input[type='radio'][name='quotation_request[payment_option]']").change(function(){
var value = $(this).val()
if(value == "lease") {
console.log(value);
} else if(value == "finance") {
console.log(value);
}
});


You could write selected value to console directly. Use combination of single and double quotes for your CSS selector.
$("input[type=radio][name='quotation_request[payment_option]'").change(function() {
console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="quotation_request_payment_option_lease" class="choose_payment_option" name="quotation_request[payment_option]" type="radio" value="lease" checked="checked">
<input id="quotation_request_payment_option_finance" class="choose_payment_option" name="quotation_request[payment_option]" type="radio" value="finance" checked="checked">


Your CSS selector is what is causing the issue try using:
$("input[name='quotation_request[payment_option]']").change(function() {
...
}

Related

select checkbox with enter key

I have a few checkboxes that I need to be selected with the enter key instead of the space bar when it has focus. I have the code below that works for one check box, but I need multiple checkboxes. I know the id tag needs to be unique, but I'm not sure how to do it.
$(document).ready(function () {
$('#mycheckbox').on('keypress', function (event) {
if (event.which === 13) {
this.checked = !this.checked;
}
});
});
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox">My text<br>
I'm trying to get this to work on all the checkboxes not just the one with the mycheckbox id.
Here's my full code so far:
`
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-
latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input:checkbox').on('keypress', function (event) {
if (event.which === 13) {
$(this).prop('checked', !$(this).prop('checked'));
}
});
});
</script>
</head>
<body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></
script>
<textarea class="textfield" id="form1" name="form1">My text
here</textarea>
<div class="taglist">
<label><input type="checkbox" value="Value 1">Value 1</label>
<label><input type="checkbox" value="Value 2">Value 2</label>
<label><input type="checkbox" value="Value 3">Value 3</label>
<label><input type="checkbox" value="Value 4">Value 4</label>
<label><input type="checkbox" value="Value 5">Value 5</label>
</div>
<script type="text/javascript">
function updateTextArea() {
var allVals = $('#form1').data('initialVal'),
lineCount = 1;
$('.taglist :checked').each(function(i) {
allVals+= (i != 0 || allVals.length > 0 ? "\r\n" : "") + $(this).val
();
lineCount++;
});
$('#form1').val(allVals).attr('rows', lineCount);
}
$(function() {
$('.taglist input').click(updateTextArea);
$('#form1').data('initialVal', $('#form1').val());
updateTextArea();
});
</script>
</body>
</html>
`

Sounds like you are trying to get this to work on all checkboxes? In that case use $( ":checkbox" ) instead of $('#mycheckbox')

You can use input[type="checkbox"] or add a class to every checkbox and yes ids must be unique:
$(document).ready(function() {
$('input[type="checkbox"]').on('keypress', function(event) {
if (event.which === 13) {
this.checked = !this.checked;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox1">My text<br>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox2">My text<br>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox3">My text<br>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox4">My text

Changing the selector should do the trick:
$('input[type=checkbox]')
This will return all inputs of type checkbox. Another approach is to give all the checkboxes you are interested in a class, and then match the class - I suggested this approach as well, in case you don't want to apply it to all of them. So the HTML:
<input type="checkbox" class="support-enter" />
Then the jquery selector:
$('.support-enter')

Or you can use class selector instead of id selector. Just add some class to your checkbox.

Use attribute-equal selector to get the inputs of type checkbox like this:
$(document).ready(function() {
$('input[type = "checkbox"]').on('keypress', function(event) {
if (event.which === 13) {
this.checked = !this.checked;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike">My text<br>
<input type="checkbox" name="Colors" value="Bike">Other text<br>

You have to use classes instead.
<input type="checkbox" name="Colors" value="Bike" class="mycheckbox">My text<br>
Jquery
$('.mycheckbox').on('keypress', function (event) {
if (event.which === 13) {
$(this).prop('checked', !$(this).prop('checked'));
}
});
Another method is to use a type selector in order to get the input elements with certain type.
$('input[type=checkbox]')
$(':checkbox').on('keypress', function (event) {
if (event.which === 13) {
$(this).prop('checked', !$(this).prop('checked'));
$('textarea').html($(this).prop('checked').toString());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike" class="mycheckbox">My text<br>
<textarea></textarea>

$(document).on('keypress', function(event) {
if (event.keyCode == 13) {
$('#mycheckbox').prop('checked', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox">

How do I show an input field if a radio button is checked using jquery

I have a radio button called "other," and when checked, I want a input field called "other-text" to show up. It's fairly simple, but I've been failing all morning.
<input name="ocalls" type="radio" name="other" id="other-radio" value="Yes"><b>Other</b><br />
<input type="text" name="other-text" id="other-text" style="display:none" />
Here is my javascript:
jQuery(function(){
jQuery("input[name=other]").change(function(){
if ($(this).val() == "Yes") {
jQuery("#other-text").show()
}
else {
jQuery("#other-text").hide();
}
});
});
JSFiddle of the failure. http://jsfiddle.net/Wpt3Y/532/

This works
jQuery("#other-radio").change(function(){...

Just updated your jsfiddle: http://jsfiddle.net/Wpt3Y/539/
<pre><input type="radio" name="other" id="other-radio" value="Yes"><b>Other</b></pre>
Your code works, you simply mistyped your radio input, it had two name attributes.

I suggest to go this way. Tried to use prop() but realised you use old version of jquery
jQuery("input:radio[name='ocalls']").change(function(){
if ($(this).attr("checked") == true) {
jQuery("#other-text").show();
}
else {
jQuery("#other-text").hide();
}
});
example with radio
Instead you can use checkbox:
html
<input name="ocalls" type="checkbox" name="other" id="other-radio" value="Yes"><b>Other</b><br />
<input type="text" name="other-text" id="other-text" style="display:none" />
js
jQuery("input:checkbox[name='ocalls']").change(function(){
if ($(this).attr("checked") == true) {
jQuery("#other-text").show();
}
else {
jQuery("#other-text").hide();
}
});
example with checkbox

<form>
<input name="ocalls" type="radio" name="other" id="other-radio" value="Yes">
<b>Other</b><br />
</input>
<input type="text" name="other-text" id="other-text" style="display: none;" />
</form>
jQuery(function(){
jQuery("#other-radio").change(function(){
if ($(this).val() == "Yes") {
jQuery("#other-text").show()
}
else {
jQuery("#other-text").hide();
}
});
});
Try this.

If you want that toggle effect you can use this code with the checkbox.
jQuery(function(){
jQuery("input[name=ocalls]").change(function(){
if($(this).attr("checked"))
{
$("#other-text").show();
}
else
{
$("#other-text").hide();
}
});
});

Your code is not working because you have name attribute twice in radio button.
use this:
<input type="radio" name="other" id="other-radio" value="Yes">
remove name="ocalls" attribute.

disable checkbox if input value is zero

i have a list of check-boxes which is created dynamically and there is input field for each check box so i want to disable the check box if input field value is zero. below is my code
HTML code
<input class="check" id="check" name="check" type="checkbox"><label for="check">checkbox <input type="hidden" id="test" value="0" /></label>
<input class="check" id="check1" name="check1" type="checkbox"><label for="check1">checkbox1 <input type="hidden" id="test" value="6" /></label>
Jquery
if($("#test").val() == "0"){
$('.check').attr("disabled", "disabled");
}
jsfiddle

You used twice id=test and JavaScript works with only the first of them.
Change id=test to class=test, or works with two differents ids.
Working code:
$('.test').each(function() {
if ($(this).val() == '0') {
$(this).parent().prev().attr('disabled', 'disabled');
}
});
http://jsfiddle.net/cDD5L/

$("input[type=hidden]").each(function() {
if($(this).val()==0){
$(this).parent().prev().attr('disabled', 'disabled');
}
});
Demo:
http://jsfiddle.net/SxypS/

Please use
$(function() {
enable_cb();
$("#group1").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.group1").removeAttr("disabled");
} else {
$("input.group1").attr("disabled", true);
}
}
It will work for you.
Let me know if still not work

checking all checkboxes jquery

Why in my js code can just with one click on name:check_all checking all checkboxes?
HTML:
<div id="ss">
<input type="checkbox" name="check_all">
</div>
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
jQuery:
$(document).on('click change','input[name="check_all"]',function() {
var checkboxes = $('.idRow');
if($(this).is(':checked')) {
checkboxes.attr("checked" , true);
} else {
checkboxes.attr ( "checked" , false );
}
});
DEMO: http://jsfiddle.net/KdaZr/
My jQuery version is 1.9.
How can fix it?

Use prop method. When your markup is rendered attributes become properties of the elements, using JavaScript you should modify properties of the element.
$(document).on('change','input[name="check_all"]',function() {
$('.idRow').prop("checked" , this.checked);
});
http://jsfiddle.net/GW64e/
Note that if input[name="check_all"] is not generated dynamically there is no need to delegate the event.

Use .prop, not .attr, to change properties of elements. .attr is for HTML attributes.
http://jsfiddle.net/KdaZr/1/

fix is as follow:-
$(document).on('click change','input[name="check_all"]',function() {
var checkboxes = $('.idRow');
if($(this).is(':checked')) {
checkboxes.each(function(){
this.checked = true;
});
} else {
checkboxes.each(function(){
this.checked = false;
});
}
});

A complete solution select || deselect checkbox jQuery :
$(document).ready(function() {
$("#checkedAll").change(function(){
if(this.checked){
$(".checkSingle").each(function(){
this.checked=true;
})
}else{
$(".checkSingle").each(function(){
this.checked=false;
})
}
});
$(".checkSingle").click(function () {
if ($(this).is(":checked")){
var isAllChecked = 0;
$(".checkSingle").each(function(){
if(!this.checked)
isAllChecked = 1;
})
if(isAllChecked == 0){ $("#checkedAll").prop("checked", true); }
}
else {
$("#checkedAll").prop("checked", false);
}
});
});
Html should be :
Single check box on checked three checkbox will be select and deselect.
<input type="checkbox" name="checkedAll" id="checkedAll"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
Hope this helps to someone as it did for me.

Unselect radio button on click

I'm trying to unselect a radio button with a click with jquery.
Wanted behavior :
If clicked radio button is already checked, uncheck
If clicked radio button is not checked, check
Here's my fiddle : http://jsfiddle.net/2te28/15/
and my code :
$('.table').on('click mousedown', '.radio', function() {
if($(this).attr('id') == $(this).parents('tr').find('.radio:checked').attr('id'))
$(this).removeAttr('checked');
});
My problem is it always gets uncheck whatever I click.
EDIT : Corrected id transcription error
EDIT2 : Both radio buttons cannot be selected at the same time!

Change your HTML. You have change the id, but you've to also change then name.
$('.table').on('click', '.radio', function() {
if (this.getAttribute('checked')) { // check the presence of checked attr
$(this).removeAttr('checked'); // if present remove that
} else {
$(this).attr('checked', true); // if not then make checked
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tr>
<td>
<input type="radio" id="radio1" name="1" checked="checked" class="radio" />
<input type="radio" id="radio2" name="2" checked="checked" class="radio" />
</td>
</tr>
</table>
DEMO
According to a comment
$('.table').on('click', '.radio', function() {
if (this.getAttribute('checked')) {
$(this).removeAttr('checked');
$(this).siblings('.radio').attr('checked', false);
} else {
$(this).attr('checked', true);
$(this).siblings('.radio').removeAttr('checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tr>
<td>
<input type="radio" id="radio1" name="1" checked="checked" class="radio" />
<input type="radio" id="radio2" name="2" checked="checked" class="radio" />
</td>
</tr>
</table>
DEMO

Check this demo: http://jsfiddle.net/535dR/1/
Code:
$('.table input[type="radio"]').on('mouseup', function() {
var radio = $(this);
if(radio.prop('nc') == 0) {
setTimeout(function() {
// *to work: this needs to run only after the event completes*
if(radio.is(':checked')) radio.removeAttr('checked');
radio.prop('nc', 1);
}, 10);
}
else radio.prop('nc', 0);
});
Updated Demo: http://jsfiddle.net/535dR/3/
With both points mentioned in the comments resolved.

Here is a simple working JSFiddle : http://jsfiddle.net/2te28/61/
The <id> and <name> for the html tags representing the radio buttons have to be unique, so those where changed to:
<input type="radio" id="radio1" name="1" class="radio"/>
<input type="radio" id="radio2" name="2" class="radio"/>
Then, you can add some simple JQuery Code:
var radioChecked = $('.table .radio').is(':checked');
$('.table .radio').click(function() {
radioChecked = !radioChecked;
$(this).attr('checked', radioChecked);
});​

<input type="radio" id="radio1" name="1" class="radio"/>
<input type="radio" id="radio2" name="2" class="radio"/>
then you need to just add
$('.radio').click(function(){
value = $(this).val();
if(val == 1){
$('#radio1').removeAttr('checked');
}
else{
$('#radio2').removeAttr('checked');
}
});
this works for me

What I do is very simple.
I set RadioButton.style.textDecoration = "none" at the beginning.
This doesn't have any effect on the RadioButton element, but the setting sticks.
Then, on the OnClick event, I check for textDecoration.
If it's "none" I set RadioButton.checked = true and textDecoration = "underline"
If it's "underline" I set RadioButton.checked = false and textDecoration = "none"

Categories

Resources