I have two radio buttons and a group of checkboxes. One radio button allows the user to check all checkboxes and the other restricts the user to check one checkbox only.
$('#r2').click(function() { //when one checkbox is checked then disable others
$('input[type="checkbox"]').prop("checked", false);
$('input[type="checkbox"]').on('change', function() {
$('input[type="checkbox"]').not(this).prop('checked', false);
});
});
$('#r1').click(function() { //uncheck all checkbox
$('input[type="checkbox"]').prop("checked", false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="r" id="r1" checked> Can Choose all checkbox
<input type="radio" name="r" id="r2"> Choose 1 checkbox only
<br>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
My problem is when I select the restrict radio button and select back the select all radio button the user can still check one checkbox only. How to solve this problem? Thanks
Fiddle example
You just have to deregister the older change event listener with off():
$('input[type="checkbox"]').off('change');
Otherwise it won't stop listening for the change event, regardless which radio button you select.
Working example:
$('#r2').click(function() { //when one checkbox is checked then disable others
$('input[type="checkbox"]').prop("checked", false);
$('input[type="checkbox"]').off('change');
$('input[type="checkbox"]').on('change', function() {
$('input[type="checkbox"]').not(this).prop('checked', false);
});
});
$('#r1').click(function() { //uncheck all checkbox
$('input[type="checkbox"]').prop("checked", false);
$('input[type="checkbox"]').off('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="r" id="r1" checked> Can Choose all checkbox<br>
<input type="radio" name="r" id="r2"> Choose 1 checkbox only<br>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
Related
I have a check box that I want to enable these radio buttons. what I have does not work. how can I JS that?
im new. :(
var sipch = document.querySelector("input[name=sip]");
sipch.addEventListener( 'change', function() {
if(sipch.checked) {
document.getElementById("protocol").disabled=false;
} else {
document.getElementById("protocol").disabled=true;
}
});
<input type="checkbox" name="sip" onsubmit="goPFive(event)" method="get">do this?
<input type="radio" class="testD" name="protocol" value="udp" disabled checked/>UDP
<input type="radio" class="testD" name="protocol" value="tcp" disabled />TCP
group your radio input with fieldset then set disabled attribute at fieldset element
<fieldset id="radioWrapper" disabled>
<input type="radio" name="protocol" class="testD" value="udp"/>UDP
<input type="radio" name="protocol" class="testD" value="tcp" />TCP
</fieldset>
I have radio button. I want that onClick on the radio button It will return false. What that happend is that the radio that i change is not checked and it is good . but the other radio button that was checked before. is not checked too.
here the code:
function disableClick(e) {
e.preventDefault();
return false;
}
<input id="fmale" type="radio" name="gender" value="1" checked="checked" onclick="return disableClick(event);">
<input id="male" type="radio" name="gender" value="2" onclick="return disableClick(event);">
'e.preventDefault()' and 'return false' are preventing next radio button to getting checked.
addEventListener can help you
function disableClick(e) {
e.target.checked = false; // clear current radio button
e.preventDefault();
return false;
}
document.getElementById("fmale").addEventListener("click",disableClick)
document.getElementById("male").addEventListener("click",disableClick)
<input id="fmale" type="radio" name="gender" value="1" checked="checked" />
<input id="male" type="radio" name="gender" value="2">
e.preventDefault does not prevent the radio button's attribute checked from being set to true. You can console.log(e.target.checked) to see it's set true, even though e.preventDefault() prevents it from visually showing as checked.
The below demo allows the other radio button to automatically be set to checked = false, but then sets the currently clicked on radio to false as well.
I'm not sure why you want to do this, but here you go
Solution
$('#fmale').click(function(e) {
e.target.checked = false;
});
$('#male').click(function(e) {
e.target.checked = false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fmale" type="radio" name="gender" value="1" checked="checked">
<input id="male" type="radio" name="gender" value="2">
I need to hide a label & radio button after a checkbox was checked a page before. I need this to hide a radio button in a order process. The problem is that the checkbox and the label&radio are not at the same page.
This is my checkbox:
<input id="coupon" class="checkbox" name="coupon" value="yes" type="checkbox">
And this are the two elements I want to hide at the next page:
<input id="payment_paypal_1" class="radio" name="payment_paypal" value="2" required="" type="radio">
<label id="payment_paypal_2" for="payment_paypal">PayPal</label>
Thank you all in advance!
If on the same page then using jquery, you can do it like this -
$("#coupon").click(function() {
if ($(this).prop('checked')===true){
console.log("checked") ;
$('#payment_paypal_1').hide();
$('#payment_paypal_2').hide();
}
else {
console.log(" un checked") ;
$('#payment_paypal_1').show();
$('#payment_paypal_2').show();
}
});
In my dashboard there are 4 radio button. I need show only one in one condition. And each button has different values
<input type="radio" name="payment_method" id="payment_method" value="Online-Others">
<input type="radio" name="payment_method" id="payment_method" value="Cash">
<input type="radio" name="payment_method" id="payment_method" value="wallet">
<input type="radio" name="payment_method" id="payment_method" value="online">
Here I need to show only cash button. Should I make different ids for each button? Or using this am I able to show that?
You can remove elements by values with a attribute selector:
// removes all 'payment_method' radios where 'value' is not 'Cash'
$(".payment_method[value!=Cash]").remove();
But as ids are unique in HTML, you could (must) better change them:
<input type="radio" name="payment_method" id="payment_method_others" value="Online-Others">
<input type="radio" name="payment_method" id="payment_method_cash" value="Cash">
<input type="radio" name="payment_method" id="payment_method_wallet" value="wallet">
<input type="radio" name="payment_method" id="payment_method_online" value="online">
JS:
// removes all 'payment_method' radios where 'id' is not 'payment_method_cash'
$(".payment_method:not(#payment_method_cash)").remove();
No need to add ID or Class
$('input[name=payment_method][value=wallet]').prop('checked',true); //if you need to highlight "wallet"
$('input[name=payment_method][value=Cash]').prop('checked',true); //if you need to highlight "Cash"
Your question in not much clear for me, are you expecting something like this ?
$('#payment_method_cash').on('change', function() {
// Show cash payment button and options.
console.log('Cash option checked : ' + $(this).prop('checked'));
});
$('#payment_method_wallet').on('change', function() {
// Show wallet payment button and options.
console.log('wallet option checked : ' + $(this).prop('checked'));
});
$('#payment_method_online').on('change', function() {
// Show online payment button and options.
console.log('online option checked : ' + $(this).prop('checked'));
});
$('#payment_method_other').on('change', function() {
// Show other payment button and options.
console.log('Other option checked : ' + $(this).prop('checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="payment_method" id="payment_method_other" value="Online-Others">
<input type="radio" name="payment_method" id="payment_method_cash" value="Cash">
<input type="radio" name="payment_method" id="payment_method_wallet" value="wallet">
<input type="radio" name="payment_method" id="payment_method_online" value="online">
You can remove id attribute and can use value attribute.
html
<input type="radio" name="payment_method" value="Online-Others">
<input type="radio" name="payment_method" value="Cash">
<input type="radio" name="payment_method" value="wallet">
<input type="radio" name="payment_method" value="online">
jquery code will be like
//if you want to show only Cash radio button
$(document).ready(function() {
$("input[value!='Cash']").css('display','none');
});
Alternately if you want to checked one radio button out of four use below jquery.
//if you want to checked Cash radio button out of four use below
$(document).ready(function() {
$("input[value='Cash']").attr('checked','true');
});
Hope it will help.
Given a set of radio buttons, like:
<input id="B_1" type="radio" name="radioName" value="1">
<input id="B_2" type="radio" name="radioName" value="2">
<input id="B_3" type="radio" name="radioName" value="3">
<input id="B_4" type="radio" name="radioName" value="4">
​When one of them gets checked is it possible to know which was previously active (if there is one)?
I tried to attach the following function to the onclick event, but it doesn't work because it returns the the presently selected radio button instead of the one that was selected before:
my_func = function() {
var checkedValue = $('input[type=radio]:checked').val();
return alert("The previously selected was: " + checkedValue);
};
I don't know if could be of any help, anyway here's the complete attempt: http://jsfiddle.net/H6h4R/
Try this - http://jsfiddle.net/H6h4R/1/
$(":radio").on("mousedown", function() {
$("p").text( $('input[type=radio]:checked').val() );
}).on("mouseup", function() {
$('input[type=radio]').prop('checked', false);
$(this).prop('checked', true);
});
The click event is only triggered after this exact series of events:
The mouse button is depressed while the pointer is inside the element.
The mouse button is released while the pointer is inside the element.
if he uses keyboard key this can help with that
http://jsfiddle.net/DYrW3/73/
$('input[name=radios]').keydown(function(){
alert("Before change "+$('input[name=radios]:checked').val());
})