I have a checkbox that will select all, at the moment if I press it, it will select all the the options(which is good!), then if I deselect one of them it doesn't deselect the Select All option. Any help in how to do this would be gratefully appreciated.
<span class="glyphicon glyphicon-check"></span>
<label for="sel1">Select days:</label><br />
<li>
<input type="checkbox" name="all" id="all" />
<label for='all'>Select All</label>
<ul>
<ul>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_1" value="1" />
<label for="box_1">Monday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_2" value="2" />
<label for="box_2">Tuesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_3" value="3" />
<label for="box_3">Wednesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_4" value="4" />
<label for="box_4">Thursday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_5" value="5" />
<label for="box_5">Friday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_6" value="6" />
<label for="box_6">Saturday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_7" value="7" />
<label for="box_7">Sunday</label>
</li>
</ul>
</ul>
</li>
</div>
Script I am currently using to Select All:
$(document).ready(function(){
$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).prop('checked', status);
});
});
$(document).ready(function){
}
Example:
http://jsfiddle.net/0e018w0y/
You're most of the way there.
I'd attach a "change" event listener to all the checkboxes, confirming that (on change) whether all the checkboxes are selected or not... (FYI you're using checkboxes and not radio buttons. Radio buttons only allow 1 to be selected at a time.)
// On change of any (not "Select All" checkbox)
$('input[name="selected[]"]').change(function () {
var selectAll = true;
// Confirm all checkboxes are checked (or not)
$('input[name="selected[]"]').each(function (i, obj) {
if ($(obj).is(':checked') === false) {
// At least one checkbox isn't selected
selectAll = false;
return false;
}
});
// Update "Select All" checkbox appropriately
$('input[name="all"]').prop('checked', selectAll);
});
In the example I've tried to follow your convention for checking if things are selected or not etc - except I've used "change()" rather than "click()" (which captures any change event, not just mouse-clicks).
Line by line:
$('input[name="selected[]"]').change(function () {
...
}
This captures the change event on all select boxes. You could use classes or a name convention to identify the checkboxes to attach it to.
var selectAll = true;
The scope of this variable reaches the nameless function provided to the .each(...) call which follows. We're using this to track whether every checkbox is checked or not.
$('input[name="selected[]"]').each(function (i, obj) {
if ($(obj).is(':checked') === false) {
// At least one checkbox isn't selected
selectAll = false;
return false;
}
});
This checks every checkbox, see if any are not checked.
Then we update the "Select All" checkbox appropriately.
Looking at it again (2 minutes later), I can see this could be reduced actually:
var allSelected = ($('input[name="selected[]"]:not(:checked)').length === 0);
// Update "Select All" checkbox appropriately
$('input[name="all"]').prop('checked', allSelected);
I've not tested if this is faster ... I've just offloaded the checking of "is checked" to jQuery itself. The "length" property returns how many elements match the criteria - ":not(:checked)" does what you'd expect, matches only the aforementioned inputs which are not checked.
If the count is not equal to 0, we deselect the "Select All" checkbox.
Example:
http://jsfiddle.net/zyxgm2kz/
Try this:
You need to bind a change listener for all the days checkbox and if all the checkboxes are checked then you can play with select all checkbox checked property.
$(document).ready(function () {
var allCB = $('input[name="selected[]"]');
var mainCB = $('input[name="all"]')
mainCB.on('click', function () {
var status = $(this).is(':checked');
allCB.prop('checked', status);
});
allCB.on('change', function () {
var status = $('input[name="selected[]"]:checked').length === allCB.length;
$('input[name="all"]').prop('checked', status);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
<input type="checkbox" name="all" id="all" />
<label for='all'>Select All</label>
<ul>
<ul>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_1" value="1" />
<label for="box_1">Monday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_2" value="2" />
<label for="box_2">Tuesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_3" value="3" />
<label for="box_3">Wednesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_4" value="4" />
<label for="box_4">Thursday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_5" value="5" />
<label for="box_5">Friday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_6" value="6" />
<label for="box_6">Saturday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_7" value="7" />
<label for="box_7">Sunday</label>
</li>
</ul>
</ul>
</li>
you can try this one:
$(document).ready(function() {
$('input[name="all"],input[name="title').click(function(event) { //on click
if(this.checked) {
$('input[type="checkbox').each(function() {
this.checked = true;
});
}else{
$('.input[type="checkbox').each(function() {
this.checked = false;
});
}
});
});
DEMO FIDDLE
$('input[name="all"],input[name="title"]').bind('click', function () {
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).prop('checked', status);
});
var checkbox = $(':checkbox').not('#all');
$(checkbox).change(function () {
checkbox.each(function () {
if ($(this).is(':checked')) {
} else {
$(':checkbox#all').prop('checked', false)
}
})
})
Get the checkbox except the all then check if one is uncheck remove the check from all
DEMO
Related
I want to be able to perform the functionality in the picture above. It wont work however.
$("#customSwitches").click(function() {
var $this = $(this);
if ($this.data('clicked')) {
alert("not element clicked");
$this.data('clicked', false);
$(document).on('click', "#radio1, #radio2, #radio3, #radio4").not(this).prop('checked', false);
});
} else {
alert("element clicked");
$this.data('clicked', true);
}
});
In each click of the check box from the groups, you can checked the checked property of #customSwitches. If it is not checked then you can count the length of checked check boxes from the group, if it is more than 1 then you can prevent the default event.
When clicking #customSwitches you can reset all the check boxes from the group.
You can try the following way:
$(".vehicle").click(function(e){
if($('#customSwitches').is(':not(:checked)')){
if($('.vehicle:checked').length > 1){
alert('You can not check multiple');
e.preventDefault();
}
}
});
$("#customSwitches").click(function(e){
$(".vehicle").prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="customSwitches"> Select Multiple</label><input type="checkbox" id="customSwitches">
<hr/>
<input class="vehicle" type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>
<input class="vehicle" type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>
<input class="vehicle" type="checkbox" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
Your current code has some syntax issues and uses nested event handlers, which is not a good design pattern.
In basic terms you are trying to build a dynamic checkbox limiter based on the first checkbox state. To do that simply determine if the first box is checked, and then count the number of checked regions to see if it exceeds the limit. If so, disallow the current box to be checked. Try this:
let $allowMulti = $('#allow_multi').on('change', function() {
if (!this.checked)
$('.region').prop('checked', false); // remove all checks if no multi allowed
});
$('.region').on('change', function() {
let selectedCount = $('.region:checked').length;
if (!$allowMulti.prop('checked') && selectedCount > 1)
$(this).prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<label>
<input type="checkbox" id="allow_multi">
Select multiple regions
</label>
</p>
<label>
<input type="checkbox" class="region" value="1"> 1
</label>
<label>
<input type="checkbox" class="region" value="2"> 2
</label>
<label>
<input type="checkbox" class="region" value="3"> 3
</label>
<label>
<input type="checkbox" class="region" value="4"> 4
</label>
I have a MultipleChoiceField and a variable my_choice = 'mystring'
I want check the option relative to my_choice
Here my html:
ul id="id_layer_select"><li><label for="id_layer_select_0"><input checked="checked" id="id_layer_select_0" name="layer_select" type="checkbox" value="1" /> <span style='font-weight:normal'>Mychoice1</span></label></li>
<li><label for="id_layer_select_1"><input id="id_layer_select_1" name="layer_select" type="checkbox" value="2" /> <span style='font-weight:normal'>Mychoice2</span></label></li>
<li><label for="id_layer_select_2"><input id="id_layer_select_2" name="layer_select" type="checkbox" value="3" /> <span style='font-weight:normal'>Mychoice3</span></label></li> [...]</ul>
here my javascript:
var my_choice = 'mystring'
var opt = $("#id_layer_select option");
opt.filter("[value=my_choice]").attr("selected", true);
I can use jquery. Thank you
PS: Off course mystring is an option Mychoice1 or Mychoice2 or etc.
I don't want use the id_layer_select_x and I prefer to not add and attribute.
The problem is that the checkbox stay unchecked and
console.log(opt)=Object { length: 0, prevObject: Object[1] }
You can filter all spans by the text they contain. You can then get the previous element and have it checked.
$(document).ready(function() {
var txt = "Mychoice3";
var labelMatchingTxt = $('#id_layer_select span').filter(function(i, el) {
return txt === el.childNodes[0].nodeValue; // avoiding DOM reselection.
}).prev().prop('checked', true);
});
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<ul id="id_layer_select"><li><label for="id_layer_select_0"><input id="id_layer_select_0" name="layer_select" type="checkbox" value="1" /> <span style='font-weight:normal'>Mychoice1</span></label></li>
<li><label for="id_layer_select_1"><input id="id_layer_select_1" name="layer_select" type="checkbox" value="2" /> <span style='font-weight:normal'>Mychoice2</span></label></li>
<li><label for="id_layer_select_2"><input id="id_layer_select_2" name="layer_select" type="checkbox" value="3" /> <span style='font-weight:normal'>Mychoice3</span></label></li> [...]</ul>
</body>
I want to make a separate function from my checkall and uncheckall button (I already have one working).
This time I want my checkall/uncheckall chekcbox checked if all children checkboxes are checked.
I was thinking maybe I can compare my checked children checkbox length from children checkbox length.
function testFunction() {
$('.cb').change(function(){
var checkedChildCheckBox = $('.cb:checked').length;
var numberOfChildCheckBoxes = $('.cb').length;
if (checkedChildCheckBox == numberOfChildCheckBoxes){
$("#checkAll").prop('checked', true);
}
})
}
Can someone give me some ideas on this? Still my checkall/uncheckall checkbox doesn't changed to checked. Conditions made was true in if statement.
Or maybe my idea of comparing length is not gonna work?
.cb my class for children checkbox
#checkall my id for parent or checkall/uncheckall checkbox
It is already working I guess - issue is putting the event listener inside a function (don't know why is that the case).
Anyway, see demo below:
var numberOfChildCheckBoxes = $('.cb').length;
$('.cb').change(function() {
var checkedChildCheckBox = $('.cb:checked').length;
if (checkedChildCheckBox == numberOfChildCheckBoxes)
$("#checkAll").prop('checked', true);
else
$("#checkAll").prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkAll">All</label>
<input type="checkbox" id="checkAll" />
<br/>
<br/>
<input class="cb" type="checkbox" />
<input class="cb" type="checkbox" />
<input class="cb" type="checkbox" />
Try below code
Js
<script type="text/javascript">
$(document).ready(function(){
$('#select_all').on('click',function(){
if(this.checked){
$('.checkbox').each(function(){
this.checked = true;
});
}else{
$('.checkbox').each(function(){
this.checked = false;
});
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#select_all').prop('checked',true);
}else{
$('#select_all').prop('checked',false);
}
});
});
</script>
Html
<ul class="main">
<li><input type="checkbox" id="select_all" /> Select all</li>
<ul>
<li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
<li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
<li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
<li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
<li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
</ul>
</ul>
Ok, so i have a list of check boxes 1, 2, 3, 4 and 5. I would like the function to select 2, 3, 4 and 5 but if 1 is selected then un-select 2, 3, 4 and 5, once 2 to 5 are un-selected display a message in a div.
So far I can select 1 and one of the others... and the message comes on selection of 1
problem 1
I cant un-select 2 to 5 once 1 is selected
problem 2
The message is displayed on page load even if the box is un-selected.
HTML
<input type="checkbox" class="" value="checkbox" name="CheckboxGroup1" id="boxchecked" />
one <br/>
<input type="checkbox" class="check" />
two <br/>
<input type="checkbox" class="check" />
three <br/>
<input type="checkbox" class="check" />
four <br/>
<input type="checkbox" class="check" />
five
<div id="hidden">Two to five can not be selected whilst you have one selected</div>
JavaScript
$('input.check').on('change', function() {
$('input.check').not(this).prop('checked', false);
});
$(document).ready(function(){
$("#boxchecked").click(function ()
{
if ($("#boxchecked").is(':checked'))
{
$("#hidden").show();
}
else
{
$("#hidden").hide();
}
});
});
$('input[name=CheckboxGroup1]').attr('checked', false);
Here is what I propose. How about giving the checkbox that can only be singly checked a class, and the others another class?
Hope it helps.
$('input[type="checkbox"]').on('click', function() {
if($(this).hasClass('singlecheck')) {
if($('input.multicheck').is(":checked")) {
$('#warning').show();
}
$('input.multicheck').prop('checked', false);
} else {
$('input.singlecheck').prop('checked', false);
$('#warning').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="singlecheck" value="one" name="CheckboxGroup1" id="boxchecked" />
one <br/>
<input type="checkbox" class="multicheck" value="two"/>
two <br/>
<input type="checkbox" class="multicheck" value="three"/>
three <br/>
<input type="checkbox" class="multicheck" value="four"/>
four <br/>
<input type="checkbox" class="multicheck" value="five"/>
five
<div id="warning" style="display:none">Two to five can not be selected whilst you have one selected</div>
What you can do is that you can disable the checkboxes 2-5 as soon as the checkbox 1 is checked and then show the message. If one is not checked your can enable the other checkboxes and hide the message as:
$('input[type="checkbox"]').on('change', function(){
if($('#boxchecked').prop('checked')) {
$('.check').attr('disabled', true);
$('#hidden').show();
}
else {
$('.check').removeAttr('disabled');
$('#hidden').hide();
}
})
#hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="" value="checkbox" name="CheckboxGroup1" id="boxchecked" />
one <br/>
<input type="checkbox" class="check" />
two <br/>
<input type="checkbox" class="check" />
three <br/>
<input type="checkbox" class="check" />
four <br/>
<input type="checkbox" class="check" />
five
<div id="hidden">Two to five can not be selected whilst you have one selected</div>
i think you want this type fuctionality :
jQuery
var box = null;
$(document).ready(function() {
$(".check").click(function() {
box = this.id;
$(".check").each(function() {
if ( this.id == box )
{
this.checked = true;
//$("#hidden").show();
var cval =$(this).val();
document.getElementById("get").innerHTML =cval;
}
else
{
this.checked = false;
};
});
});
});
HTml Code
<input type="checkbox" class="check" value="one" name="CheckboxGroup1" id="one" />
one <br/>
<input type="checkbox" class="check" id="two" value="two" />
two <br/>
<input type="checkbox" class="check" id="three" value="three" />
three <br/>
<input type="checkbox" class="check" id="four" value="four" />
four <br/>
<input type="checkbox" class="check" id="five" value="five" />
five
<div id="hidden">This checkbox number is <label id="get">0</label></div>
I hope its usefull for you
To un-select check box 2-5, you can use something like this:
$('input[name="CheckboxGroup1"]').on('click', function() {
if ($(this).is(":checked")) {
$('input.check').prop('checked', false);
}
})
For message to be hidden initially, you can have an initialization function that will set/reset UI states to default
function initUI() {
$('input[name=CheckboxGroup1]').attr('checked', false);
$('#hidden').hide();
}
Sample Fiddle
Also, for cases where you have if...else to toggle visibility of a field, you should use .toggle(VisibilityValue)
$("#boxchecked").click(function() {
$("#hidden").toggle($("#boxchecked").is(':checked'))
});
Updated Fiddle
I have a form and group of checkboxes in it. (These checkboxes are dynamically created but I dont think it is important for this question). The code that generates them looks like this (part of the form):
<div id="ScrollCB">
<input type="checkbox" name="ALL" value="checked" checked="checked">
All (if nothing selected, this is default) <br>
<c:forEach items="${serviceList}" var="service">
<input type="checkbox" name="${service}" value="checked"> ${service} <br>
</c:forEach>
</div>
What I want to do is control, whether the checkbox labeled "ALL" is checked and if yes - check all other checkboxes (and when unchecked, uncheck them all).
I tried doing this with javascript like this (found some tutorial), but it doesnt work (and Im real newbie in javascript, no wonder):
<script type="text/javascript">
$ui.find('#ScrollCB').find('label[for="ALL"]').prev().bind('click',function(){
$(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);
}); });
</script>
Could you tell me some simple approach how to get it work? Thanks a lot!
demo
updated_demo
HTML:
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
JS:
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('div input').attr('checked', true);
} else {
$('div input').attr('checked', false);
}
});
HTML:
<form>
<label>
<input type="checkbox" id="selectall"/> Select all
</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
</form>
JS:
$('#selectall').click(function() {
$(this.form.elements).filter(':checkbox').prop('checked', this.checked);
});
http://jsfiddle.net/wDnAd/1/
Thanks to #Ashish, I have expanded it slightly to allow the "master" checkbox to be automatically checked or unchecked, if you manually tick all the sub checkboxes.
FIDDLE
HTML
<label><input type="checkbox" name="sample" class="selectall"/>Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox1</label><br/>
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox4</label><br />
</div>
SCRIPT
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('input:checkbox').prop('checked', true);
} else {
$('input:checkbox').prop('checked', false);
}
});
And now add this to manage the master checkbox as well...
$("input[type='checkbox'].justone").change(function(){
var a = $("input[type='checkbox'].justone");
if(a.length == a.filter(":checked").length){
$('.selectall').prop('checked', true);
}
else {
$('.selectall').prop('checked', false);
}
});
Add extra script according to your checkbox group:
<script language="JavaScript">
function selectAll(source) {
checkboxes = document.getElementsByName('colors[]');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
</script>
HTML Code:
<input type="checkbox" id="selectall" onClick="selectAll(this,'color')" />Select All
<ul>
<li><input type="checkbox" name="colors[]" value="red" />Red</li>
<li><input type="checkbox" name="colors[]" value="blue" />Blue</li>
<li><input type="checkbox" name="colors[]" value="green" />Green</li>
<li><input type="checkbox" name="colors[]" value="black" />Black</li>
</ul>
use this i hope to help you i know that this is a late answer but if any one come here again
$("#all").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
Only in JavaScript with auto check/uncheck functionality of master when any child is checked/unchecked.
function FnCheckAll()
{
var ChildChkBoxes = document.getElementsByName("ChildCheckBox");
for (i = 0; i < ChildChkBoxes.length; i++)
{
ChildChkBoxes[i].checked = document.forms[0].CheckAll.checked;
}
}
function FnCheckChild()
{
if (document.forms[0].ChildCheckBox.length > document.querySelectorAll('input[name="ChildCheckBox"]:checked').length)
document.forms[0].CheckAll.checked = false;
else
document.forms[0].CheckAll.checked = true;
}
Master CheckBox:
<input type="checkbox" name="CheckAll" id="CheckAll" onchange="FnCheckAll()" />
Child CheckBox:
<input type="checkbox" name="ChildCheckBox" id="ChildCheckBox" onchange="FnCheckChild()" value="#employee.Id" />```
You can use jQuery like so:
jQuery
$('[name="ALL"]:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
A fiddle.
var selectedIds = [];
function toggle(source) {
checkboxes = document.getElementsByName('ALL');
for ( var i in checkboxes)
checkboxes[i].checked = source.checked;
}
function addSelects() {
var ids = document.getElementsByName('ALL');
for ( var i = 0; i < ids.length; i++) {
if (ids[i].checked == true) {
selectedIds.push(ids[i].value);
}
}
}
In HTML:
Master Check box <input type="checkbox" onClick="toggle(this);">
Other Check boxes <input type="checkbox" name="ALL">
You can use the :first selector to find the first input and bind the change event to it. In my example below I use the :checked state of the first input to define the state of it's siblings. I would also suggest to put the code in the JQuery ready event.
$('document').ready(function(){
$('#ScrollCB input:first').bind('change', function() {
var first = $(this);
first.siblings().attr('checked', first.is(':checked'));
});
});
I am not sure why you would use a label when you have a name on the checkbox. Use that as the selector. Plus your code has no labels in the HTML markup so it will not find anything.
Here is the basic idea
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings().prop("checked",this.checked);
});
if there are other elements that are siblings, than you would beed to filter the siblings
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings(":checkbox").prop("checked",this.checked);
});
jsFiddle