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.
Related
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">
I would like to unselect a radio button when I click on the label and the following code only works as expected if I click on the button itself.
How to link the behaviour of the label to the button?
<label>
<input type="radio" name="choice" value="HTML" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false" /> Learn HTML
</label>
<label>
<input type="radio" name="choice" value="Java" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false"/> Learn JavaScript
</label>
Radio buttons don't work like you are thinking they do. To deselect one you need to either select another with the same name attribute or reset the form. The functionality that you are describing fits more with a checkbox than a radio button. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio for the specs. You may also want to take a look at this question/answer: Reset Particular Input Element in a HTML Form.
Also, there is no need to wrap your label tag around the input. The for attribute takes care of the linking.
If you want to de-select a radio button, you will need to reset the form.
form {
display: flex;
flex-direction: column;
}
<form>
<label for="ckb-01">
<input id="ckb-01" type="radio" name="choice" value="HTML" />
Learn HTML
</label>
<label for="ckb-02">
<input id="ckb-02" type="radio" name="choice" value="Java" />
Learn JavaScript
</label>
<label for="ckb-03">
<input id="ckb-03" type="radio" name="choice" value="Java" />
Learn CSS
</label>
<input type="reset" />
</form>
use the attribut for in the label
<label for='idHTML'>Learn HTML </label>
give the radio the id equivalent
<input id='idHTML' type="radio" name="choice" />
what do you mean by this.__chk
onMouseDown="this.__chk = this.checked"
onClick="if (this.__chk) this.checked = false"
if you wanna select just one you could use simply type radio with group the options with one name='choice'
if you want check and uncheck multiple choices you could use checkbox
After many attempts I finally managed to code a working solution with some javascript.
The problem is that as soon as the radio button is clicked its state changes. the previous value needs to be stored in order to know if it has to be unselected or not.
<main id="form">
<label >
<input type="radio" name="rad" id="Radio0" />Learn Html
</label>
<br><br>
<label>
<input type="radio" name="rad" id="Radio1" />Learn CSS
</label>
<br><br>
<label>
<input type="radio" name="rad" id="Radio2" />Learn Java
</label>
</main>
<script>
let buttons = document.querySelectorAll('#form input');
for (button of buttons){
button.dataset.waschecked="false";
button.addEventListener('click', myFunction, false);
}
function myFunction(e) {
if (e.originalTarget.dataset.waschecked == "false"){
for (button of document.querySelectorAll('#form input')){
button.dataset.waschecked = "false";
}
e.originalTarget.dataset.waschecked = "true";
e.originalTarget.checked =true;
}else {
for (button of document.querySelectorAll('#form input')){
button.dataset.waschecked = "false";
}
e.originalTarget.checked =false;
}
}
</script>
Any suggestion to improve this code is welcome.
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();
}
});
i have two checkboxes. i want this algorithm happen:
if i check checkbox1 i want checkbox 2 to be uncheck,
then if i check checkbox2 i want checkbox1 to be unchecked.
therefore, i need to select one checkbox only.
and i want this in jquery.
thank you..
HTML
<input type="checkbox" name="checkme" id="cc1">Check Me1</input>
<input type="checkbox" name="checkme" id="cc2">Check Me2</input>
JavaScript
$('#cc1').change(function(){
var c = this.checked ? $('#cc1').prop('checked', true) : $('#cc2').prop('checked', false);
});
$('#cc2').change(function(){
var c = this.checked ? $('#cc2').prop('checked', true) : $('#cc1').prop('checked', false);
});
http://jsfiddle.net/z4nKW/
$('#cc1').change(function(){
$('#cc2').prop('checked', !$(this).prop('checked'));
});
$('#cc2').change(function(){
$('#cc1').prop('checked', !$(this).prop('checked'));
});
Maybe radio buttons are better fit for such case.
THE DEMO>
this, by itself is a javascript element and therefor doesn't have a property "checked".
You need to wrap it in jQuery like so:
$(this).checked
Radio buttons ensure that only one item is selected:
<form>
<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
</form>
source (w3schools)
Use radio buttons:
<input type="radio" name="option">Option 1</input>
<input type="radio" name="option">Option 2</input>
you can also do this
Html:
<input type="checkbox" name="checkme" class="check" id="cc1">Check Me1</input>
<input type="checkbox" name="checkme" class="check" id="cc2">Check Me2</input>
JQuery
$(".check").each(function()
{
$(this).change(function()
{
$(".check").prop('checked',false);
$(this).prop('checked',true);
});
});
I have some radio button so in that some Null Value are present so i want to remove it by identify dynamically
<input type="radio" name="Result_radio" id="Result_0" >Group</input>
<input type="radio" name="Result_radio" id="Result_1" >individual</input>
<input type="radio" name="Result_radio" id="Result_2" >Null Value</input>
Input type radio don't have closing tags.
Use label for the values
<input type="radio" name="Result_radio" id="Result_0" > <label>Group</label>
<input type="radio" name="Result_radio" id="Result_1" ><label>individual</label>
<input type="radio" name="Result_radio" id="Result_2" ><label>Null Value</label>
jQuery:
$('input:radio').each(function() {
if($(this).next('label').text() == 'Null Value'){
$(this).next('label').remove();
$(this).remove();
}
});
Fiddle
Do note that your HTML is invalid, and will be interpreted by browsers as:
<input type="radio" name="Result_radio" id="Result_0">Group
<input type="radio" name="Result_radio" id="Result_1">individual
<input type="radio" name="Result_radio" id="Result_2">Null Value
Therefore, we have to check for the next text node after each input:
// For each radio button
$('input:radio').each(function() {
// If trimmed text after the current radio button is 'Null Value',
if($.trim(this.nextSibling.nodeValue) == 'Null Value') {
// Remove the text node
$(this.nextSibling).remove();
// Remove current radio button
$(this).remove();
}
});
http://jsfiddle.net/vJ8xN/