On click function uncheck other radio buttons - javascript

I have given code
<ul id="payment-method-fields">
<li id="paypal">
<label>
<input checked="checked" id="order_payments_attributes__payment_method_id_5" name="order[payments_attributes][][payment_method_id]" type="radio" value="5">
Test Paypal
</label>
</li>
<li id="adyen">
<label>
<input id="order_payments_attributes__payment_method_id_4" name="order[payments_attributes][][payment_method_id]" type="radio" value="4">
Ali Pay
</label>
</li>
<li id="adyen_encrypted">
<label>
<input id="order_payments_attributes__payment_method_id_16" name="order[payments_attributes][][payment_method_id]" type="radio" value="16">
credit card
</label>
</li>
<li id="cod" >
<label>
<input id="cash-on-delivery" name="cod" type="radio" value="">
Cash on Delivery
</label>
</li>
</ul>
my requirement is when click on other li i.e on Cash on Delivery then paypal gets unchecked. Please guide me how I will write this jquery.

My proposal is:
$('#payment-method-fields :input[type="radio"]').on('change', function(e) {
if (this.id == 'cash-on-delivery') {
$('#payment-method-fields').find('input[type="radio"]:not(#' + this.id + ')').prop('checked', false);
}
});

You can do this:
$('#cash-on-delivery').on('change', function(){
$('input[name="order[payments_attributes][][payment_method_id]"]')
.prop('checked', !this.checked);
});

Simply give them the same name for all input tags
Example:
<input type="radio" name="group_name" />
This ensures only one is selected at any time.

You can give all inputs a same class for example
class="radio_button"
And then you can add code
$(document).ready(function(){
$('.radio_button').on('click',function(){
$('.radio_button').removeAttr('checked');
$(this).prop('checked','checked');
})
}

The last input has a different name <input id="cash-on-delivery" name="cod" type="radio" value=""> than the others so when you check it the others won't automatically uncheck. Give it the same name and it will work fine.
Here is an Example of it working.
Code:
<ul id="payment-method-fields">
<li id="paypal">
<label>
<input checked="checked" id="order_payments_attributes__payment_method_id_5" name="order[payments_attributes][][payment_method_id]" type="radio" value="5">
Test Paypal
</label>
</li>
<li id="adyen">
<label>
<input id="order_payments_attributes__payment_method_id_4" name="order[payments_attributes][][payment_method_id]" type="radio" value="4">
Ali Pay
</label>
</li>
<li id="adyen_encrypted">
<label>
<input id="order_payments_attributes__payment_method_id_16" name="order[payments_attributes][][payment_method_id]" type="radio" value="16">
credit card
</label>
</li>
<li id="cod" >
<label>
<input id="cash-on-delivery" name="order[payments_attributes][][payment_method_id]" type="radio" value="">
Cash on Delivery
</label>
</li>
</ul>

Removing the property 'checked' from the input-elements with the jQuery removeProp function. For your example create two functions and call them in the onClick trigger of your input-elements:
function uncheckTop3() {
$('#order_payments_attributes__payment_method_id_5').removeProp('checked');
$('#order_payments_attributes__payment_method_id_4').removeProp('checked');
$('#order_payments_attributes__payment_method_id_16').removeProp('checked');
}
function uncheckCashOnDelivery() {
$('#cash-on-delivery').removeProp('checked');
}
Here a jfiddle-link to your example.

To check/uncheck a checkbox, use the attribute checked and alter that. With jQuery you can do:
//$('#myCheckbox').attr('checked', true); // Checks it
//$('#myCheckbox').attr('checked', false); // Unchecks it
$('#cash-on-delivery').on('change', function(){
$('input[name="order[payments_attributes][][payment_method_id]"]').attr('checked',true);
});

Related

The first radio button is unchecked while selecting the second one

I have checkboxes and radio buttons on my page.
I have some scenario.
When the user selects the first checkbox then the first radio will select and if you unchecked the checkbox then the radio button will unchecked.
If the user directly selects the radio button then the nearest checkbox will select.
The above scenarios are almost working, I am getting the issue on the second checkbox.
I select the first checkbox then the first radio button is selected. If I select the second check then the radio button is selecting but the first radio is unchecked.
$("input[type='radio']").click(function() {
$(this).closest('.reviewers-details').find('.selectRV').prop('checked', true);
});
$("input[type='checkbox']").click(function() {
var checkbox = $(this).closest('.reviewers-details').find('.selectRV').prop('checked');
if (checkbox == true) {
// $(this).closest('.reviewers-details').find('input[type=radio]').prop('checked', true);
$(this).closest('.reviewers-details').find('input[type=radio]:first').prop('checked', true);
} else if ($(this).prop("checked") == false) {
$(this).closest('.reviewers-details').find('input[type=radio]').prop('checked', false);
}
});
<div class="reviewers-details d-table sectionHeading">
<div class="d-table-cell">
<input type="checkbox" name="reviewerid[1]" class="revieweruser selectRV" value="1">test
<ul>
<li>
<input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="1">
<label>abc</label>:
</li>
<li>
<input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="3">
<label>xyz</label>:
</li>
</ul>
</div>
</div>
<div class="reviewers-details d-table sectionHeading">
<div class="d-table-cell">
<input type="checkbox" name="reviewerid[1]" class="revieweruser selectRV" value="1">demo
<ul>
<li>
<input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="1">
<label>abc</label>:
</li>
<li>
<input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="3">
<label>xyz</label>:
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
All radio buttons with the same value for their name attribute will be part of the same radio group: if one becomes selected, the others automatically become unselected.
Below, I simply renamed the radio buttons in your second group to isolate them (and their linked checkbox) from the first group.
(You may want to rename the checkbox as well, unless you have a reason for it to share a name with the first checkbox.)
$("input[type='radio']").click(function() {
$(this)
.closest('.reviewers-details')
.find('.selectRV')
.prop('checked', true);
});
$("input[type='checkbox']").click(function() {
var checkbox = $(this)
.closest('.reviewers-details')
.find('.selectRV')
.prop('checked');
if (checkbox == true) {
$(this)
.closest('.reviewers-details')
.find('input[type=radio]:first')
.prop('checked', true);
}
else if ($(this).prop("checked") == false) {
$(this)
.closest('.reviewers-details')
.find('input[type=radio]')
.prop('checked', false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="reviewers-details d-table sectionHeading">
<div class="d-table-cell">
<input type="checkbox"
name="reviewerid[1]"
class="revieweruser selectRV"
value="1"
/>test
<ul>
<li>
<input type="radio"
name="reviewer_timeslot[1]"
class="revieweruser"
value="1"
/>
<label>abc</label>:
</li>
<li>
<input type="radio"
name="reviewer_timeslot[1]"
class="revieweruser"
value="3"
/>
<label>xyz</label>:
</li>
</ul>
</div>
</div>
<div class="reviewers-details d-table sectionHeading">
<div class="d-table-cell">
<input type="checkbox"
name="reviewerid[1]"
class="revieweruser selectRV"
value="1"
/>demo
<ul>
<li>
<input type="radio"
name="reviewer_timeslot[2]"
class="revieweruser"
value="1"
/>
<label>abc</label>:
</li>
<li>
<input type="radio"
name="reviewer_timeslot[2]"
class="revieweruser"
value="3"
/>
<label>xyz</label>:
</li>
</ul>
</div>
</div>

Unselect a default checkbox when all other box are checked

I have an HTML layout which has several checkboxes, one of the options is ALL and other options. When user clicks other options, ALL should be unchecked and when no other options are selected ALL should be checked.
here is the example: https://codepen.io/desandro/pen/JLBdv
this works but I want to change the layout so the input is in a list.
<ul>
<li><input type="checkbox" name="category" class="all" checked>
<label>All</label></li>
<li>
<input type="checkbox" name="category" value=".category-football"><label>Football</label>
</li>
<li><input type="checkbox" name="category" value=".category-running"><label>Running </label></li><ul>
but if I put the input fields inside the list, the original code is no longer working.
how can I change the original js to work with checkboxes inside the list?
Just add class names to your inputs.
Example: ALL input can be class='checkme_all' and other inputs class='checkme'
<ul>
<li>
<input class='checkme_all' type="checkbox" name="category" class="all" checked>
<label>All</label>
</li>
<li>
<input class='checkme' type="checkbox" name="category" value=".category-football">
<label>Football</label>
</li>
<li>
<input class='checkme' type="checkbox" name="category" value=".category-running">
<label>Running </label>
</li>
<ul>
Then use jQuery to provide desired behavior:
$('.checkme').on('change', function() {
if($('.checkme_all').prop('checked')) {
$('.checkme_all').prop('checked', false)
}
})
$('.checkme_all').on('change', function() {
$('.checkme').prop('checked', false)
})
Result:
Here's a Fiddle

jquery to iterate through list items with nested inputs

I have inputs nested inside of anchors nested inside of list items. I'd like to use jquery to iterate through the list items, and if an item was selected display the values in a text field. I'm close, I'm down to the input control, but the "if (checked)" statement is not working.
Can somebody please tell me what I'm doing wrong? :(
function ddDistrictChanged() {
var txt = "nothing selected";
var $inp = $('#ddDistrict').find('input');
$inp.each(function (index) {
$('#txtHere').text($(this).children('li'));
if ($(this).checked) {
txt = txt + ', ' + $(this).text();
}
$('#txtHere2').text(txt);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ddDistrict" class="dropdown-menu">
<li><input name="selCol" type="checkbox" value="1"> District 1 (Porter)</li>
<li><input name="selCol" type="checkbox" value="2"> District 2 (Jones Jr.)</li>
<li><input name="selCol" type="checkbox" value="3"> District 3 (Horne)</li>
<li><input name="selCol" type="checkbox" value="4"> District 4 (Haddaway)</li>
<li><input name="selCol" type="checkbox" value="5"> District 5 (Duncan)</li>
<li><input name="selCol" type="checkbox" value="6"> District 6 (Willner)</li>
<li><input name="selCol" type="checkbox" value="7"> District 7 (Brady)</li>
<li><button type="button" class="btn btn-default btn-sm btn-info center-block" onclick="ddDistrictChanged();">Submit</button></li>
</ul>
<div id="txtHere"></div>
<div id="txtHere2"></div>
Would make it cleaner if you wrapped the text in an element like <span>
<li><a ><input/><span> District 1 (Porter)</span></a></li>
Next can use :checked pseudo selector to select only checked inputs
function ddDistrictChanged() {
var txt = "nothing selected";
var $items = $('#ddDistrict').find('li has(input:checked)');
if ($items.length) {
txt = $items.map(function() {
return $(this).find('span').text()
}).get().join(', ');
}
$('#txtHere2').text(txt);
}
Working JSFiddle DEMO
To start with, lets refactor your HTML to make it a bit easier to interact with when using JavaScript/jQuery. I have opted to use labels with your inputs instead of <a> tags.
<ul class="ddDistrict dropdown-menu">
<li>
<input type="checkbox" id="cbox1" value="1" checked>
<label for="cbox1" class="small underlineText_No">District 1 (Porter)
</label>
</li>
<li>
<input type="checkbox" id="cbox2" value="2">
<label for="cbox2" class="small underlineText_No">District 2 (Jones Jr)
</label>
</li>
<li>
<input type="checkbox" id="cbox3" value="3">
<label for="cbox3" class="small underlineText_No">District 3 (Horne)
</label>
</li>
<li>
<input type="checkbox" id="cbox4" value="4">
<label for="cbox4" class="small underlineText_No">District 4 (Haddaway)
</label>
</li>
<li>
<input type="checkbox" id="cbox5" value="5">
<label for="cbox5" class="small underlineText_No">District 5 (Duncan)
</label>
</li>
<li>
<input type="checkbox" id="cbox6" value="6">
<label for="cbox6" class="small underlineText_No">District 6 (Willner)
</label>
</li>
<li>
<input type="checkbox" id="cbox7" value="7">
<label for="cbox7" class="small underlineText_No">District 7 (Brady)
</label>
</li>
<li>
<button type="button" class="btn btn-default btn-sm btn-info center-block" onclick="ddDistrictChanged();">Submit</button>
</li>
</ul>
<div class="txtHere"></div>
I then created some basic JavaScript/jQuery to check if any checkboxes have been checked on load and update the DOM according to what has been checked, and when they are checked.
var $inputs = $('.ddDistrict input');
var $outputWrapper = $('.txtHere');
// Check for boxes that have already been checked and
// append their labels to the DOM.
$inputs.each(function() {
var currentLabel = $(this).next('label').text();
var currentID = $(this).attr('id');
if (this.checked) {
var outputText = $('<p></p>').addClass(currentID).text(currentLabel);
$outputWrapper.append(outputText);
}
});
// This event handler will watch for any changes to the
// checkboxes and will append the value of their labels
// to the DOM on change.
$inputs.change(function() {
var currentLabel = $(this).next('label').text();
var currentID = $(this).attr('id');
if (this.checked) {
var outputText = $('<p></p>').addClass(currentID).text(currentLabel);
$outputWrapper.append(outputText);
} else {
$('.' + currentID).remove();
}
});
It's all relatively simple stuff and the code can be refactored to make it more DRY, but this should definitely put you in the right direction. Let me know if you have any questions.

Not being able to pre-select desired radio box by default

I am trying to pre-select premium delivery by default. I was looking on the web and really don't understand why it would not pre-select the second radio-box. Please find link to my JSfiddle
My code is also:
jQuery(document).ready(function() {
waitForDelayedContent('#checkout-shipping-method-load .input-checkout-radio .method-title:contains(Take it to my room)', function() {
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC) .method-title:contains(Take it to my room)').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC):has(.method-title:contains(Take it to my room)) .radio').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:has(.method-title:contains(Take it to my room))').addClass('mtC');
});
});
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked="checked" class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
</li>
</ul>
</div>
</div>
It is because the first radio box has checked="check". Move that to the second radio box to make it work. No need for JavaScript. See this updated fiddle: http://jsfiddle.net/n5h65n73/
Or, if you really need to do it with JavaScript:
$("#s_method_premium").prop("checked", true)
The issue is within your HTML. You have the checked="checked" attribute set on the first radio input. So if you remove that attribute and move it to the second one, it'll work as you want.
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
To do this using jQuery, here's the code snippet:
$('#s_method_premium').attr('checked', 'true');
The basic explanation is that you are using the attr method of jQuery to modify the property (i.e., the first argument) with the desired value (i.e., the second argument). And then necessity for both lines of code is to remove the first checked before setting the second one.
Does that help?

How can I get the index of this element with jQuery?

I am trying to get the index of an element using jQuery to send to a PHP script.
Here is my XHTML
<form action="/accreditation/questions/" method="post" id="questions-form">
<fieldset id="question-0">
<legend>Question</legend>
<h3>What colour is grass?</h3>
<ul>
<li>
<input type="radio" name="answer[0]" value="0" id="radio-0-0" />
<label for="radio-0-0">Green</label>
</li>
<li>
<input type="radio" name="answer[0]" value="1" id="radio-0-1" />
<label for="radio-0-1">Red</label>
</li>
<li>
<input type="radio" name="answer[0]" value="2" id="radio-0-2" />
<label for="radio-0-2">Orange</label>
</li>
</ul>
</fieldset>
<fieldset id="question-1">
<legend>Question</legend>
<h3>how old is alex</h3>
<ul>
<li>
<input type="radio" name="answer[1]" value="0" id="radio-1-0" />
<label for="radio-1-0">21</label>
</li>
<li>
<input type="radio" name="answer[1]" value="1" id="radio-1-1" />
<label for="radio-1-1">11</label>
</li>
<li>
<input type="radio" name="answer[1]" value="2" id="radio-1-2" />
<label for="radio-1-2">23</label>
</li>
</ul>
</fieldset>
</form>
I need to get the index of the fieldset elements. I am currently using this each iterator (which I'd like not to change because it has a lot of other functions inside it).
$('#questions-form ul li').each(function() {
qIndex = $('fieldset').index($('fieldset', $(this).parent()))
});
I'd like qIndex to be the index of fieldset relative to the form. For example, in this case I should have it equal to 0 and 1 (although there would be 6 values because it's looping through the list elements).
I have played around for a while and have been unable to get the correct index. I keep getting not found (-1).
If it helps, here is the code I'm using to get the list item's index relative to it's containing ul element.
index = $('li', $(this).parent()).index(this);
What is wrong with my fieldset index grabbing code?
The LI's parent is UL, not the fieldset.
I think this will set qIndex for you:
qIndex = $('fieldset').index($(this).parents('fieldset'));
You can also get the index using:
$("form fieldset").each(function(I) {
console.log("fieldset index"+ I);
});

Categories