Develop Reference

radio button onclick function disable another function

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">

jQuery - hide label & radio after checkbox is checked

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

Jquery duplicate selected checkbox

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.

Select the checkbox and show the selected checkbox value in a div with close button

I am following a tutorial, there are multiple checkboxes , when we select the check box and click on the get selected value button then the value of the selected checkboxes alerted. [this is the tutorial site][1] .Now i want to do that when someone select the checkbox then the value of the checkbox show in a div with a close option. For now we click on the get selected value button to get the selected checkbox value but i want it automatic with out the get selected value button..i mean when we check the checkbox at the same time the value show in a div. I want to apply this for my own project. When the check box checked then the value show in a div like this.The value of the checkbox with close option [the fiddle is here http://jsfiddle.net/eba6Lytk/
[1]: http://www.jquerywithexample.com/2012/11/get-selected-checkbox-using-jquery.html

Something like this. Note that this will also:
uncheck all other boxes when a box is clicked making sure only one
box is checked at a time
hide the div if the box is unchecked
uncheck the box when the div is closed
$('.chkNumber').click(function(){
if($(this).is(':checked')){
//uncheck all the other boxes
$('.chkNumber').prop('checked', false);
//re-check this one
$(this).prop('checked', true);
//show the div
$('#hiddenDiv').show();
//update the displayed value to that of the checked box
$('#numberDisplay').html( $(this).val() );
}
else{
//clicked box was unchecked, hide the div and clear the displayed number
$('#hiddenDiv').hide();
$('#numberDisplay').html('');
}
});
$('#closeBtn').click(function(){
//div was closed, uncheck all boxes, hide the div, and clear the displayed number
$('.chkNumber').prop('checked', false);
$('#hiddenDiv').hide();
$('#numberDisplay').html('');
});
#hiddenDiv{
display:none;
border:thin inset #9B8E8E;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<input type="checkbox" class="chkNumber" value="1" />One<br />
<input type="checkbox" class="chkNumber" value="2" />Two<br />
<input type="checkbox" class="chkNumber" value="3" />Three<br />
<input type="checkbox" class="chkNumber" value="4" />Four<br />
<input type="checkbox" class="chkNumber" value="5" />Five<br /><br />
</div>
<div id="hiddenDiv">
<div id="numberDisplay"></div>
<br>
<br>
<input type="button" id="closeBtn" value="Close Div"/>
</div>

how to set checked radio button by checking another radio button

I have 2 seperate fields with 4 radio buttons each.
Field nr1 has radio button unchecked by using jquery, field nr2 has the first radio button checked by default.
What i need is, if in field nr1 a radio button is checked, then it checks the same radio button in field nr2.
Here is how my html looks like:
<p class="form-row form-row-wide validate-required" id="billing_piegadatajs_field"><label for="billing_piegadatajs" class="">Piegādes veids <abbr class="required" title="vajadzīgs">*</abbr></label><br>
<input type="radio" name="billing_piegadatajs" value="Pasta Stacija" class="radio" style="width:10%" checked="checked"><span for="billing_piegadatajs">Pasta Stacija</span><br>
<input type="radio" name="billing_piegadatajs" value="Post24" class="radio" style="width:10%"><span for="billing_piegadatajs">Post 24</span><br>
<input type="radio" name="billing_piegadatajs" value="Kurjerdienests" class="radio" style="width:10%"><span for="billing_piegadatajs">Kurjerdienests</span><br>
<input type="radio" name="billing_piegadatajs" value="Saņemt uz vietas" class="radio" style="width:10%"><span for="billing_piegadatajs">Saņemt uz vietas ( Saldū )</span>
</p>
<br>
<tr class="shipping">
<th>Piegādes izmaksas</th>
<td>
<ul id="shipping_method">
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" checked="checked" class="shipping_method">
<label for="shipping_method_0_flat_rate">Pasta Stacijas: <span class="amount">€ 3.50</span></label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_international_delivery" value="international_delivery" class="shipping_method">
<label for="shipping_method_0_international_delivery">Post 24: <span class="amount">€ 3.50</span></label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_apg_shipping" value="apg_shipping" class="shipping_method">
<label for="shipping_method_0_apg_shipping">DLW Kurjeris: <span class="amount">€ 9.00</span></label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup" value="local_pickup" class="shipping_method">
<label for="shipping_method_0_local_pickup">Uz vietas - Saldū (Bez maksas)</label>
</li>
</ul>
</td>
</tr>
I use this jquery to uncheck the field nr1 radio button when page is loaded.
jQuery(document).ready(function(){
jQuery('#billing_piegadatajs_field')
jQuery('#billing_piegadatajs_field').find('input[name="billing_piegadatajs"]').each(function() {
jQuery(this).prop('checked', false);
});
});
Here is a link to jsfiddle

You can acheive this in many many ways
One approach should be considering 2 set of radio
you have 2 sets already :
the first one share the class name 'radio'
the second one share the class name 'shipping_method'
The logic
1) add a click event on all radio of the first set
2) Get the order rank of the one we click on
3) force a click event on the radio button having the same index in the second set
// Track the click on the first set of radio
jQuery('.radio').on('click',function(){
// Get the element index , which one we click on
var indx = jQuery(this).index('.radio');
// Trigger a click on the same index in the second radio set
jQuery('.shipping_method')[indx].click();
})
there is the jsfiddle : http://jsfiddle.net/MMJRk/21/

First you need to find out which box is checked. The following link may help.
In jQuery, how do I select an element by its name attribute?
Then you need to loop through the next check boxes, comparing the value to the value you want for each box. When you find the one you want. Check that one.
Link for how to check box.
How to check a radio button with jQuery ?

Well, i have to admit it is not the most ideal way of getting what you want. But it does the trick: http://jsfiddle.net/veritas87/MMJRk/25/
jQuery('p.form-row input[type=radio]').on('change', function () {
var radioNumber = $(this).index('.radio');
$("ul#shipping_method input[type=radio]:eq(" + radioNumber + ")").prop('checked', true);
});
In short, when a radiobutton changes in p.form-row it will get the index of the clicked radiobutton and it will set the radiobutton in the second list of radiobuttons to checked.

I've updated your jsfiddle and now it works.
Basically, I assigned to each input (and its counterpart), an index using custom data attributes (data-index). I attached an event handler to the first group of inputs, and, based on the index of the checked one, I check the correct radiobutton in the second group:
$('#billing_piegadatajs_field input[type="radio"]').on('change', function() {
if (!this.checked) return;
var index = this.getAttribute('data-index');
$('#shipping_method input[data-index="' + index + '"]').prop('checked', true);
});