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
Related
I have textarea field and 3 groups of checkboxes. User can individually select any checkbox and checkbox value will be added to textarea field. But how to include "Select all" functionality to select all checkboxes in group? I created "Select all" function, but after selection values are not added to textarea field.
// Add checkbox value to text field
$checks = $("ul li :checkbox");
$checks.on("change", function() {
var string = $checks.filter(":checked").map(function(i,v){
return this.value;
}).get().join(",");
$("#results").val( "checked:" + string);
});
// Select all checkboxes in the group
jQuery(function($){
$('#allg1').click(function () { $('.group1 li input').not(this).prop('checked', this.checked);});
$('#allg2').click(function () { $('.group2 li input').not(this).prop('checked', this.checked);});
$('#allg3').click(function () { $('.group3 li input').not(this).prop('checked', this.checked);});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="results" rows="2" cols="60"> </textarea>
<ul class="group1">
<input type="checkbox" id="allg1" name="allg1"><label for="allg1">Select all from group G1</label>
<li><input type="checkbox" value="G101"></li>
<li><input type="checkbox" value="G102"></li>
<li><input type="checkbox" value="G103"></li>
</ul>
<ul class="group2">
<input type="checkbox" id="allg2" name="allg2"><label for="allg2">Select all from group G2</label>
<li><input type="checkbox" value="G201"></li>
<li><input type="checkbox" value="G202"></li>
<li><input type="checkbox" value="G203"></li>
</ul>
<ul class="group3">
<input type="checkbox" id="allg3" name="allg3"><label for="allg3">Select all from group G3</label>
<li><input type="checkbox" value="G301"></li>
<li><input type="checkbox" value="G302"></li>
<li><input type="checkbox" value="G303"></li>
</ul>
To achieve this you can trigger() the change event manually on the checkboxes when the 'Select all' is toggled. Your normal event handler will then run which updates the text in the textbox.
Also note that you can DRY up the JS controlling the 'Select all' boxes by using common class attributes on them.
jQuery($ => {
// Add checkbox value to text field
let $checks = $("ul li :checkbox").on("change", function() {
let string = $checks.filter(":checked").map((i, el) => el.value).get().join(",");
$("#results").val(string && "checked:" + string);
});
// Select all checkboxes in the group
$('.all').click(e => {
$(e.target).closest('.group').find('li input').not(e.target).prop('checked', e.target.checked).trigger('change');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="results" rows="2" cols="60"> </textarea>
<ul class="group">
<label><input type="checkbox" class="all" name="allg1">Select all from group G1</label>
<li><input type="checkbox" value="G101"></li>
<li><input type="checkbox" value="G102"></li>
<li><input type="checkbox" value="G103"></li>
</ul>
<ul class="group">
<label><input type="checkbox" class="all" name="allg2">Select all from group G2</label>
<li><input type="checkbox" value="G201"></li>
<li><input type="checkbox" value="G202"></li>
<li><input type="checkbox" value="G203"></li>
</ul>
<ul class="group">
<label><input type="checkbox" class="all" name="allg3">Select all from group G3</label>
<li><input type="checkbox" value="G301"></li>
<li><input type="checkbox" value="G302"></li>
<li><input type="checkbox" value="G303"></li>
</ul>
I'm trying to figure out why the alert boxes and console logs don't work as intended when I check a checkbox.
jquery code
$(document).ready(function(){
$("#location").click(function(){
$("input[name='location']:checked").each(function(){
alert("go");
});
});
});
laravel blade checkbox code
<div class="sidebar-box">
<h5>Location</h5>
<ul class="checkbox-list">
#foreach($store_location as $store_location)
<li class="checkbox">
<label>
<input type="checkbox" class="i-check" id="location" name="location">
{{ $store_location->store_location_name }}
</label>
</li>
#endforeach
</ul>
</div>
First you should answer, if the #foreach loop works fine and renders the ul > li list correctly. I gues it works.
The JS Code
I've rewritten your code and it works even though there is a problem in your code. You really should use non-identical id attributes. You can use classes or what ever multiple times in different HTML tags, but not the id attribute. But this does not cause the problem. Have a look on the example:
Example (in plain JavaScript)
document.querySelectorAll('#location').forEach(locationEl => {
locationEl.addEventListener('click', () => {
document.querySelectorAll('input[name=location]:checked').forEach(el => {
console.log('go');
});
});
});
/*
"Equivalent" to your jQuery Code:
$(document).ready(function(){
$("#location").click(function(){
$("input[name='location']:checked").each(function(){
alert("go");
});
});
});
*/
<ul>
<li>
<input type="checkbox" name="location" id="location">
</li>
<li>
<input type="checkbox" name="location" id="location">
</li>
<li>
<input type="checkbox" name="location" id="location">
</li>
<li>
<input type="checkbox" name="location" id="location">
</li>
</ul>
Better:
document.querySelectorAll('input[name=location]').forEach(locationEl => {
locationEl.addEventListener('click', () => {
document.querySelectorAll('input[name=location]:checked').forEach(el => {
console.log(el.value, 'is checked');
});
});
});
<ul>
<li>
<input type="checkbox" name="location" value="1">
</li>
<li>
<input type="checkbox" name="location" value="2">
</li>
<li>
<input type="checkbox" name="location" value="3">
</li>
<li>
<input type="checkbox" name="location" value="4">
</li>
</ul>
With input[name=location] as a selector you are addressing any input tag with an attribute name with a value of location. And this should just work.
The Blade Template Code
You are using most probably by accident the same variable name for the variable which should be iterated and the output item of each loop. You should try to rename them depending on the name of the variable which holds the array of your desired information:
<div class="sidebar-box">
<h5>Location</h5>
<ul class="checkbox-list">
#foreach($store_location as $location)
<li class="checkbox">
<label>
<input type="checkbox" class="i-check" name="location">
{{ $location->store_location_name }}
</label>
</li>
#endforeach
</ul>
</div>
If this won't work, consider to upload some part of your rendered HTML code. The one you've uploaded is the blade code, right? Or try to debug your variables that you've pushing toward your blade template. Good luck!
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>
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);
});
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);
});