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();
}
});
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.
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.
I have a search page that uses a form and checkboxes to display results. When the page reloads with the new results, I want to display something like this at the top of the page so users can easily remove one of their selections:
X Blue X Red X Black
My checkboxes look like this:
<input type="checkbox" name="color[]" id="color_white" value="white">White
<input type="checkbox" name="color[]" id="color_blue" value="blue" checked="checked">Blue
<input type="checkbox" name="color[]" id="color_red" value="red" checked="checked">Red
<input type="checkbox" name="color[]" id="color_orange" value="orange">Orange
<input type="checkbox" name="color[]" id="color_purple" value="purple">Purple
<input type="checkbox" name="color[]" id="color_black" value="black" checked="checked">Black
How do I go about getting the selected checkboxes, and then duplicating them at the top of the page so a user can just click on the X to make it "uncheck?"
Click events and form submission is done in jquery, so I'm assuming that this can be done that way too. Can anyone help? Thank you!
I would suggest adding a blank div at the top
<div id="checked"></div>
And then on load create a button for each checked input
$(function(){
$('input[type=checkbox]').each(function(){
if($(this).attr('checked')=='checked'){
$('#checked').append('<input id="'+$(this).attr('id').substring(6)+'" type="button" value="'+$(this).attr('id')+'">')
}
});
$('input').on('click',function(){
var i='color_'+$(this).attr('id');
$('#'+i).prop('checked','');
$(this).remove();
});
});
If a button is clicked remove the check and remove itself.
I have two grid views containing 12 and 24 rows resp. Each row contains radiobutton list(Yes/No). Below both the grids, there is one more radio button list. In first grid, all radio buttons are by default "Yes". If any one selects know, the radio button below the grids should become disabled with selection ="No". In second grid the radio buttons are by default "No". If any one selects Yes, the radio button below the grid should become disabled with selected value="No". All these work should be done through javascript...
How can I do so...???
First user clicked a button at first grid. Then you capture it and changed the second grid to false. Use EventListener. I used checkbox for this job. Because you cant set more than 1 radio button checked at same time in same form.
<h3>First Grid</h3>
<input id="radio1_1" type="checkbox" name="correctAnswer" value="1">Yes
<input id="radio1_2" type="checkbox" name="correctAnswer" value="2">No
<br>
<h3>Second Grid</h3>
<input id="radio2_1" type="checkbox" name="correctAnswer" value="1">Yes
<input id="radio2_2" type="checkbox" name="correctAnswer" value="2">No
<br>
<h3 id="h3">Third Grid</h3>
<input id="radio3_1" type="checkbox" name="correctAnswer" value="1">Yes
<input id="radio3_2" type="checkbox" name="correctAnswer" value="2">No
And a jQuery function
$(document).ready(function(){
$('#radio1_2').prop('checked', true);
$('#radio2_2').prop('checked', true);
$('#radio3_2').prop('checked', true);
$('#radio1_1').click(function(){
$('#radio2_2').prop('checked', false);
$('#radio2_2').prop('disabled', true);
})
$('#radio2_1').click(function(){
$('#radio3_2').prop('checked', false);
$('#radio3_2').prop('disabled', true);
})
});
You can find this example at this link