I'm trying to solve this issue. I have multiple inputs and I would like to compare if everyone has value == 0 and is also checked.
I don't know how to do it - I spend almost day searching and finding a way how to do it and don't have clue how to go further. I tried to find if one input is checked and has that value.
Thank U for Your help.
$(document).on('change','select, input', function() {
console.log('input/select has been changed');
var $this = $(this);
var $inputValue = $this.val();
console.log('input Value is ' + $inputValue);
if ($inputValue == 0 && $this.is(':checked')) {
console.log('One input is checked and has 0 value');
}
if ('all first inputs are checked and has 0 value') {
console.warn('Could U help me?');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="destinations">
<ul>
<li>
<label>
<input type="checkbox" name="destination" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="3">
</label>
</li>
</ul>
</div>
<div class="languages">
<ul>
<li>
<label>
<input type="radio" name="language" value="0">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="5">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="3">
</label>
</li>
</ul>
</div>
<div class="rooms">
<ul>
<li>
<label>
<input type="checkbox" name="room" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="3">
</label>
</li>
</ul>
</div>
</body>
I'm not completely sure what you want, but I think this can help you
$(document).on('change', 'select, input', function () {
console.log('input/select has been changed');
checkInputValue();
});
function checkInputValue() {
var inputs = $('input');
var inputsWithValZero = $(inputs).filter(function (index,elm) {
return ($(elm).val() == 0);
});
var inputsWithValZeroAndChecked = $(inputs).filter(function (index,elm) {
return ($(elm).val() == 0 && $(elm).is(':checked'));
});
if ($(inputsWithValZero).length == inputsWithValZeroAndChecked.length){
console.log('all checked inputs checked has 0 value');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="destinations">
<ul>
<li>
<label>
<input type="checkbox" name="destination" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="3">
</label>
</li>
</ul>
</div>
<div class="languages">
<ul>
<li>
<label>
<input type="radio" name="language" value="0">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="5">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="3">
</label>
</li>
</ul>
</div>
<div class="rooms">
<ul>
<li>
<label>
<input type="checkbox" name="room" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="3">
</label>
</li>
</ul>
</div>
</body>
<script>
$(document).on('change', 'select, input', function () {
console.log('input/select has been changed');
checkInputValue();
});
function checkInputValue() {
var count = 0;
$('input').each(function ( index,value) {
console.log(value);
console.log(index);
if ($(value).val() == 0 && $(value).is(':checked')) {
count = count + 1;
console.log(count+' input is checked and has 0 value');
}
});
console.log($('input').length);
if ($('ul').length == count)
console.log('all first inputs are checked and has 0 value')
}
</script>
Related
I am trying to output the order number in which the checkboxes are checked. Whichever checkbox is checked first should show "a" beside it, whichever is checked second should show "b" beside it and so on.. Can anyone help?
<ul class="dropdown-content checkboxes">
<li>
<label>
<input type="checkbox" />
Billy
</label>
</li>
<li>
<label>
<input type="checkbox" />
Jacob
</label>
</li>
<li>
<label>
<input type="checkbox" />
Bob
</label>
</li>
<li>
<label>
<input type="checkbox" />
Alexandren
</label>
</li>
<li>
<label>
<input type="checkbox" />
Erren
</label>
</li>
<li>
<label>
<input type="checkbox" />
Stewgart
</label>
</li>
<li>
<label>
<input type="checkbox" />
Jillian
</label>
</li>
<li>
<label>
<input type="checkbox" />
Other
</label>
</li>
</ul>
You can add checked checkboxes at the end of an array, and remove them when get unchecked. By doing so, it will automatically adjust letters on checked boxes like so:
const cb = document.querySelectorAll('ul.checkboxes input[type="checkbox"]');
const order = [];
const onInput = e =>
{
const data = e.target;
const index = order.indexOf(data);
if (index != -1)
order.splice(index, 1);
if (e.target.checked)
order[order.length] = data;
for(let i = 0; i < cb.length; i++)
{
const index = order.indexOf(cb[i]);
cb[i].parentNode.setAttribute("num", String.fromCharCode(65 + index));
}
}
for(let i = 0; i < cb.length; i++)
cb[i].addEventListener("input", onInput);
.checkboxes label[num]:not([num = "#"]):before
{
content: attr(num);
}
.checkboxes label:before
{
content: "";
width: 1em;
display: inline-block;
}
<ul class="dropdown-content checkboxes">
<li>
<label>
<input type="checkbox" />Billy</label>
</li>
<li>
<label>
<input type="checkbox" />Jacob</label>
</li>
<li>
<label>
<input type="checkbox" />Bob</label>
</li>
<li>
<label>
<input type="checkbox" />Alexandren</label>
</li>
<li>
<label>
<input type="checkbox" />Erren</label>
</li>
<li>
<label>
<input type="checkbox" />Stewgart</label>
</li>
<li>
<label>
<input type="checkbox" />Jillian</label>
</li>
<li>
<label>
<input type="checkbox" />Other</label>
</li>
This keeps track of the order of items clicked in an array. When one is deselected, it splices the array and reorders the alphabet letters according to the order of the array
let alpha = 'abcdefghijklmnopqrstuvwxyz'.split('');
document.querySelectorAll('li').forEach(el => {
el.innerHTML += '<span class="letter"> </span>'
})
let checkedItems=[]
document.querySelectorAll('[type=checkbox]').forEach(el => {
el.value = el.closest('label').innerText.trim()
el.addEventListener('change', e => {
let n = el.closest('label').innerText.trim();
if (!e.target.checked) checkedItems.splice(checkedItems.indexOf(n),1)
else checkedItems.push(n);
document.querySelectorAll('.letter').forEach( l=> l.innerHTML = '')
checkedItems.forEach((n,i) => {
document.querySelector(`input[value=${n}]`).closest('li').querySelector('.letter').innerHTML = alpha[i]
})
});
});
.letter {
display: inline-block;
color: #333;
font-weight:bold;
padding: 2px 4px;
margin-left: 5px;
}
<ul class="dropdown-content checkboxes">
<li>
<label>
<input type="checkbox" />Billy</label>
</li>
<li>
<label>
<input type="checkbox" />Jacob</label>
</li>
<li>
<label>
<input type="checkbox" />Bob</label>
</li>
<li>
<label>
<input type="checkbox" />Alexandren</label>
</li>
<li>
<label>
<input type="checkbox" />Erren</label>
</li>
<li>
<label>
<input type="checkbox" />Stewgart</label>
</li>
<li>
<label>
<input type="checkbox" />Jillian</label>
</li>
<li>
<label>
<input type="checkbox" />Other</label>
</li>
You set the value for each checkbox.
<input type="checkbox" value="1" />
Whenever it will be checked, it can trigger an event and you can get the value.
$("#checkbox").change(function(){
var checked = $(this).is(":checked");
var value = $(this).val();
});
This is javascript:
$('.chkbx').click(function(){
var text = "";
$('.chkbx:checked').each(function(){
text += $(this).val()+',';
});
text = text.substring(0,text.length-1);
$('#textbx').val(text);
});
When I select numbers in the checkbox, It does not work in the input textbox.
JSFiddle
You can use .change event instead of .click like below,
$('.chkbx').change(function() {
// this will contain a reference to the checkbox
var text = "";
$('.chkbx:checked').each(function() {
text += $(this).val() + ',';
});
text = text.substring(0, text.length - 1);
console.log(text)
$('#textbx').val(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cat_list">
<li>
<input id="1" value="1" type="checkbox" class="chkbx" name="cat[]">
<label for="1" class="selectit">1</label>
<ul class="children">
<li>
<input id="11" value="11" type="checkbox" class="chkbx" name="cat[]">
<label for="11" class="selectit">11</label>
<ul class="children">
<li>
<input id="111" value="111" type="checkbox" class="chkbx" name="cat[]">
<label for="111" class="selectit">111</label>
</li>
<li>
<input id="112" value="112" type="checkbox" class="chkbx" name="cat[]">
<label for="112" class="selectit">112</label>
</li>
</ul>
</li>
<li>
<input id="12" value="12" type="checkbox" class="chkbx" name="cat[]">
<label for="12" class="selectit">12</label>
</li>
<li>
<input id="13" value="13" type="checkbox" class="chkbx" name="cat[]">
<label for="13" class="selectit">13</label>
</li>
<li>
<input id="14" value="14" type="checkbox" class="chkbx" name="cat[]">
<label for="14" class="selectit">14</label>
</li>
<li>
<input id="15" value="15" type="checkbox" class="chkbx" name="cat[]">
<label for="15" class="selectit">15</label>
<ul class="children">
<li>
<input id="151" value="151" type="checkbox" class="chkbx" name="cat[]">
<label for="151" class="selectit">151</label>
</li>
<li>
<input id="152" value="152" type="checkbox" class="chkbx" name="cat[]">
<label for="152" class="selectit">152</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br/><br/>
<input type='text' id='textbx' value='' />
This question already has answers here:
Escape square brackets when assigning a class name to an element
(4 answers)
Closed 5 years ago.
I have a set of checkboxes like this
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
generated by WordPress API now I need to select the chech box by it's name attribute like following but I am getting this error
Syntax error, unrecognized expression:
input:checkbox[name=tax_input[apptax][]]
can you please let me know how to fix this
$('input:radio[name=r3]').on('change', function() {
$('input:checkbox[name=tax_input[apptax][]]').removeAttr('checked');
console.log('changes happend')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="" data-wp-lists="list:" class=" form-no-clear">
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
<li id="apptax-17">
<label class="selectit">
<input value="17" type="checkbox" name="tax_input[apptax][]" id="in-apptax-17"> Maybe</label>
</li>
<li id="apptax-16">
<label class="selectit">
<input value="16" type="checkbox" name="tax_input[apptax][]" id="in-apptax-16"> Yes</label>
</li>
</ul>
<div class="panel-body">
<label class="checkboxer">
<input type="radio" name="r3" value="15"> No</label>
<label class="checkboxer">
<input type="radio" name="r3" value="17"> Maybe</label>
<label class="checkboxer">
<input type="radio" name="r3" value="16"> Yes</label>
</div>
You need to escape the brackets like this:
$('input:checkbox[name=tax_input\\[apptax\\]\\[\\]]').removeAttr('checked');
See working jsfiddle:
https://jsfiddle.net/8hw051vu/
You can just enclosed the name by "" like $('input:checkbox[name="tax_input[apptax][]"]')
$(document).ready(function(){
$('input:checkbox[name="tax_input[apptax][]"]').removeAttr('checked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15" checked/> No
Some characters simply won't work well on css selectors. If you can't avoid using them, then use an id if it's an unique element or create a class if they are expected to be many.
If you are in a hurry use #Ingal S. solution
Select the checkbox by the value of radio button to value of checkbox.
$('input:radio[name=r3]').on('change', function() {
var value = $(this).val()
$('input:checkbox[value='+value+']').removeAttr('checked');
console.log('changes happend')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="" data-wp-lists="list:" class=" form-no-clear">
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
<li id="apptax-17">
<label class="selectit">
<input value="17" type="checkbox" name="tax_input[apptax][]" id="in-apptax-17"> Maybe</label>
</li>
<li id="apptax-16">
<label class="selectit">
<input value="16" type="checkbox" name="tax_input[apptax][]" id="in-apptax-16"> Yes</label>
</li>
</ul>
<div class="panel-body">
<label class="checkboxer">
<input type="radio" name="r3" value="15"> No</label>
<label class="checkboxer">
<input type="radio" name="r3" value="17"> Maybe</label>
<label class="checkboxer">
<input type="radio" name="r3" value="16"> Yes</label>
</div>
I want to prevent the button to be click when there are no item selected in the list. Only enable it when at least 1 in the list have highlight class.
HTML
<ul class="list">
<li><input type="checkbox" name="cat[]" id="1" value="227">
<label class="label-list" for="1">Select</label></li>
<li><input type="checkbox" name="cat[]" id="2" value="227">
<label class="label-list" for="2">Select</label></li>
<li><input type="checkbox" name="cat[]" id="3" value="227">
<label class="label-list" for="3">Select</label></li>
<li><input type="checkbox" name="cat[]" id="4" value="227">
<label class="label-list" for="4">Select</label></li>
</ul>
<input type="submit" id="search" class="btn-info" value="search" disabled>
SCRIPT:
$(".list .label-list").click(function() {
$(this).toggleClass("highlight");
});
CSS:
.highlight {background:red;}
FIDDLE
Tried to use this script but how do I toggle the attr from disabled to enabled?
if( $('.list .label-list').hasClass('highlight') === true )
{
$('#search').addClass('active');
}
You should rather test for is :checked like
var $checkb = $(".list").find("input[type='checkbox']"),
$search = $("#search");
$checkb.on("change", function(){
$search.prop("disabled", !$checkb.is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li>
<label>
<input type="checkbox" name="cat[]" value="224">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="225">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="226">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="227">
Select
</label>
</li>
</ul>
<input type="submit" id="search" class="btn-info" value="search" disabled>
you can simple count all selected checkbox with this jquery selector
$('input[type=checkbox]:checked').length
this returns the total count of the checkbox selected
just add this event listener which occurs every time a checkbox value is change
$(document).on('change', 'input[type=checkbox]', function() {
var disabled = $('input[type=checkbox]:checked').length ? false: true;
$("#search").attr('disabled', disabled);
})
DEMO
I have a few checkboxes with the name="location[]" and each checkbox has a different value value="3" or value="5" etc. I am wondering how in jquery when these boxes are checked to put the value inside an array called location[] ? Here is my html:
<ul id="searchFilter">
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="1">Toronto</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="3">New York</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="6">London</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="5">Paris</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="4">Berlin</li>
</ul>
and heres what I got as far a jquery:
var $checkboxes = $("input:checkbox");
var opts = [];
$checkboxes.each(function(){
if(this.checked){
opts.push(this.name);
}
this returns just location[] and adds another location[] when I check another item.
Please help.
I also have other checkboxes with price[], sqft[]...I am looking to keep the checkboxes in the same ground, so arrays inside 1 array...i hope that makes sense.
You can use the :checked selector and map() to create an array from a set of matched elements. Try this:
$(':checkbox').change(e => {
let opts = $(":checkbox:checked").map((i, el) => el.value).get();
console.log(opts);
});
/* alternative for IE support:
$(':checkbox').change(function() {
var opts = $(":checkbox:checked").map(function() {
return this.value;
}).get();
console.log(opts);
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchFilter">
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="1">
Toronto
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="3">
New York
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="6">
London
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="5">
Paris
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="4">
Berlin
</li>
</ul>
I have multiple checkboxes, location[], price[], sqft[] - how could I keep them in separate arrays but still inside the opts?
To do that you need to restrict the map() to the current ul element by using closest():
$(':checkbox').change(function() {
let opts = $(this).closest('ul').find(":checkbox:checked").map((i, el) => el.value).get();
console.log(opts);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchFilter">
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="1">
Toronto
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="3">
New York
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="6">
London
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="5">
Paris
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="4">
Berlin
</li>
</ul>
<ul id="searchFilter">
<li>
<input type="checkbox" name="price[]" class="cb_price" value="2">
$200,000 to $299,999
</li>
<li>
<input type="checkbox" name="price[]" class="cb_price" value="3">
$300,000 to $399,999
</li>
<li>
<input type="checkbox" name="price[]" class="cb_price" value="4">
$400,000 to $499,999
</li>
<li>
<input type="checkbox" name="price[]" class="cb_price" value="5">
$500,000+
</li>
</ul>