I have a sequence of checkboxes that can be disabled or not through the disabled in the input tag
By clicking on the parent checkbox, I need only those NOT disabled to be checked
Current and desired:
Code so far:
$("#checkAll").click(function () {
$("input:checkbox").not(this).prop("checked", this.checked);
});
You could use the :not() selector combined with the has attribute selector :
$("#checkAll").change(function () {
$("input:checkbox:not([disabled])").prop("checked", this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
As suggested by #connexo, you should use .change() instead of .click(). See this answer for more information.
Vanilla JS, always preferred:
document.getElementById('checkAll').addEventListener('change', function() {
for (const cb of document.querySelectorAll('input[type=checkbox]:not([disabled])')) {
if (cb !== this) cb.checked = this.checked;
}
});
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
Related
I have a bunch of checkboxes:
<input type="checkbox" name="foo" value="1" />
<input type="checkbox" name="foo" value="2" />
<input type="checkbox" name="foo" value="3" />
<input type="checkbox" name="foo" value="4" />
<input type="checkbox" name="foo" value="5" />
<input type="checkbox" name="foo" value="6" />
I want to change the checked attribute the ones with values 1, 3 and 5. Is there a cleaner way to provide a selector than below (preferably a one-liner)?
$('[name="foo"][value="1"],[name="foo"][value="3"],[name="foo"][value="4"]').prop({ checked: true }).change();
P.S. Found a better way:
$('[name="foo"]').filter('[value="1"],[value="3"],[value="4"]').prop({ checked: true }).change();
Using prop(propertyName, function) could do something like
var checkVals = [1, 3 , 5];
// Adjust selector to fit needs
$(':checkbox').prop('checked', function(){
return checkVals.indexOf(+this.value) > -1 || this.checked;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="foo" value="1" />
<input type="checkbox" name="foo" value="2" />
<input type="checkbox" name="foo" value="3" />
<input type="checkbox" name="foo" value="4" />
<input type="checkbox" name="foo" value="5" />
<input type="checkbox" name="foo" value="6" />
Or using filter()
var checkVals = [1, 3 , 5];
// Adjust selector to fit needs
$(':checkbox').filter(function() {
return checkVals.indexOf(+this.value) > -1;
}).prop('checked', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="foo" value="1" />
<input type="checkbox" name="foo" value="2" />
<input type="checkbox" name="foo" value="3" />
<input type="checkbox" name="foo" value="4" />
<input type="checkbox" name="foo" value="5" />
<input type="checkbox" name="foo" value="6" />
I suppose if you know the indices you want to check beforehand, you won't have to put them in manually:
$([1, 3, 5].map(x => `[name="foo"][value="${x}"]`).join(",")).prop({ checked: true }).change();
That snippet uses fancy es6 arrow functions and template literals. If you can't use those, it looks a little nastier but still isn't too bad:
$([1, 3, 5].map(function(x) { return '[name="foo"][value="' + x + '"]').join(",")).prop({ checked: true }).change();
Finally, you can even do it without collecting them all in the same selector:
[1,3,5].forEach(x => { $(`[name="foo][value="${x}"]`).prop({ checked: true }).change(); });
Pick your poison I guess.
here is the html:
<input id="globalchecker" type="checkbox"/>
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
and here is the jquery:
$('#globalchecker').on('click', function () {
if($('#globalchecker').is(":checked")){
$('.childcheckboxes:checkbox').prop('checked',true);
}
else{
$('.childcheckboxes:checkbox').prop('checked', false);
}
});
when clicking the '#globalchecker' checkbox, the '.childcheckboxes' don't get checked/un-checked. What am I doing wrong?
Here is your code this works perfectly.
$('#globalchecker').on('click', function () {
if($('#globalchecker').is(":checked")){
$('.childcheckboxes:checkbox').prop('checked',true);
}
else{
$('.childcheckboxes:checkbox').prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="globalchecker" type="checkbox"/>
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
$('#globalchecker').on('change', function() { //use change
$('.childcheckboxes:checkbox').prop('checked', $(this).is(":checked")); //use the state of #globalchecker as parameter for checked or not to make it 1 liner
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="globalchecker" type="checkbox" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
Use change event
Seems like you are mostly correct. Here's my version:
var $globalChecker = $('#globalchecker');
var $children = $('.child');
$globalChecker.on('click', function() {
if ( $(this).is(":checked") ) {
$children.prop('checked',true);
} else {
$children.prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='item-list'>
<li class='item'>
<label class='input-w'> <!-- probably put them all in labels like this -->
<span class='label'>global?</span>
<input type="checkbox" id="globalchecker" />
</label>
</li>
<li class='item'>
<input type="checkbox" class='child'/>
</li>
<li class='item'>
<input type="checkbox" class='child'/>
</li>
<li class='item'>
<input type="checkbox" class='child'/>
</li>
<li class='item'>
<input type="checkbox" class='child'/>
</li>
</ul>
Use JQuery change on all checkboxes. Below code checks, if all checkboxes are checked, then even global gets checked. Also, if you click global checkbox then all children checkboxes gets checked too (works two-way):
$('#globalchecker').on('change', function() {
$('.childcheckboxes:checkbox').prop('checked', $(this).is(":checked"));
});
$('.childcheckboxes').on('change', function() {
if ($('.childcheckboxes').length == $('.childcheckboxes:checked').length) {
$('#globalchecker').prop('checked', true);
} else {
$('#globalchecker').prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="globalchecker" type="checkbox" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
$('#globalchecker').on('click', function () {
if($('#globalchecker').is(":checked")){
$('.childcheckboxes:checkbox').prop('checked',true);
}
else{
$('.childcheckboxes:checkbox').prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="globalchecker" type="checkbox"/> Global Checkbox
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
Your code working fine for me, here is my solution.
Instead of using if else you can you can use the current state of the global checkbox.
$('#globalchecker').on('click', function() {
var isGlobalChecked = $('#globalchecker').is(":checked");
$('.childcheckboxes:checkbox').prop("checked", isGlobalChecked);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
global<input id="globalchecker" type="checkbox" />
<br/>
<br/> one
<input type="checkbox" class="childcheckboxes" /> two
<input type="checkbox" class="childcheckboxes" /> three
<input type="checkbox" class="childcheckboxes" /> four
<input type="checkbox" class="childcheckboxes" />
Please help me how to identify if a checkbox with specific id is checked/unchecked.
<input name="A" id="test" type="checkbox" value="A" />
<input name="B" id="test" type="checkbox" value="B" />
<input name="C" id="test1" type="checkbox" value="C" />
<input name="C" id="test1" type="checkbox" value="D" />
If i check the checkbox with id="test" and name="a", then the event should fire and otherwise it should not for rest of the checkbox with different id other than "test"
Please help
Since you tag JQuery you can find it helpful
AAA <input type="checkbox" id="test" />
BBB <input type="checkbox" id="test1" />
CCC <input type="checkbox" id="test2" />
and
$( "input" ).on( "click", function() {
// for a specific one, but you can add a foreach cycle if you need more
if($('#test').is(":checked")){
alert('is checked!');
}else {
alert('is NOT checked!');
}
});
Element IDs in a given document must be unique! Hence, change your HTML to something like below and take a look at the script.
$(function() {
$(":checkbox").on("change", function() {
//When the id is test1
//And name is A
//And it's checked
if (this.id === "test1" && this["name"] === "A" && this.checked) {
alert ("Checkbox with name A and ID test1 is checked");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="A" id="test1" type="checkbox" value="A" />
<input name="B" id="test2" type="checkbox" value="B" />
<input name="C" id="test3" type="checkbox" value="C" />
<input name="C" id="test4" type="checkbox" value="D" />
Id's must be Unique.... otherwise when you use document.getElementById();
It will select First occurence of specific Id...
Instead implement like this..
<input name="A" type="checkbox" value="A" />
<input name="B" type="checkbox" value="B" />
<input name="C" type="checkbox" value="C" />
<input name="C" type="checkbox" value="D" />
and trigger a event on click oncheck box and use document.getElementsByName('');
I have a form that finds lost and found items.
<input type="radio" name="subcatitemlost" value="subDiv1" />Luggage
<div id="subDiv1" class="desc">
<label>
<input type="radio" name="subluggage" id="truck" value="t" />
</label>Trunk</br>
<label>
<input type="radio" name="subluggage" id="chest" value="chest" />
</label>Chest</br>
<label>
<input type="radio" name="subluggage" id="suitcase" value="suitcase" />
</label>Suitcase</br>
<label>
<input type="radio" name="subluggage" id="duffelbag" value="duffelbag" />
</label>Duffelbag</br>
<label>
<input type="radio" name="subluggage" id="tote" value="tote" />
</label>Tote</br>
</div>
<br />
<input type="radio" name="subcatitemlost" value="subDiv2" />Clothing
<div id="subDiv2" class="desc">
<input type="radio" name="subclothing" id="shirt" value="shirt" />
</label>Shirt</br>
<input type="radio" name="subclothing" id="shoes" value="shoes" />
</label>Shoes</br>
<input type="radio" name="subclothing" id="pants" value="pants" />
</label>Pants</br>
<input type="radio" name="subclothing" id="jacket" value="jacket" />
</label>Jacket</br>
<input type="radio" name="subclothing" id="suit" value="suit" />
</label>Suit</br>
<input type="radio" name="subclothing" id="hat" value="hat" />
</label>Hat</br>
</div>
<br />
The main categories will unselect themselves upon selection of another main category , however , the subcategories will remain selected and I cannot figure how to control that.I am looking for the script that doesn't allow another subcategory to be selected when the correct button is selected.
$(document).ready(function () {
$("div.desc").hide();
$("input[name$='subcatitemlost']").click(function () {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
Try using this
$(document).ready(function() {
$("div.desc").hide();
$("input[name$='subcatitemlost']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
$("div input:radio").attr('checked', false);
});
});
http://jsfiddle.net/dbtA4/
How can I use jQuery to delete the text in the textarea that gets from the input_one when it not checked (one_1 one_3 one_4) ,and when it checked add it into textarea again?
The code is below:
<div id="input_one">
<input type="checkbox" value="one">
<input type="checkbox" value="one_1">
<input type="checkbox" value="one_2">
<input type="checkbox" value="one_3">
<input type="checkbox" value="one_4">
</div>
<div id="input_two">
<input type="checkbox" value="two_1">
<input type="checkbox" value="two_2">
<input type="checkbox" value="two_3">
<input type="checkbox" value="two_4">
<input type="checkbox" value="two_5">
</div>
<textarea id="get_checked"></textarea>
For example textarea value should be one one_3 two_4
Hope this helps
function updateTextArea() {
var allVals = [];
$('#input_one :checked,#input_two :checked').each(function () {
allVals.push($(this).val());
});
$('#get_checked').val(allVals);
}
$(function () {
$('#input_one input,#input_two input').click(updateTextArea);
});
jsfiddle
You can select checked checkbox using :checked selector and use .map() to replace item of checkboxs array with value of it.
$("#input_one :checkbox, #input_two :checkbox").change(function() {
var text = $("#input_one :checked, #input_two :checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
$(":checkbox").change(function() {
var text = $(":checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input_one">
<input type="checkbox" value="one" />
<input type="checkbox" value="one_1" />
<input type="checkbox" value="one_2" />
<input type="checkbox" value="one_3" />
<input type="checkbox" value="one_4" />
</div>
<div id="input_two">
<input type="checkbox" value="two_1" />
<input type="checkbox" value="two_2" />
<input type="checkbox" value="two_3" />
<input type="checkbox" value="two_4" />
<input type="checkbox" value="two_5" />
</div>
<textarea id="get_checked"></textarea>
As you said in question, the resutl text splited by space.