How to checked checkbox main when sub checkbox not checked?

How to checked checkbox main when sub checkbox not checked? - javascript

How to checked checkbox main when sub checkbox not checked ?
When checkbox id="checkItem1" and id="checkItem2" and id="checkItem3" not checked,
i want to auto checked checkbox id="checkAll" how can i do that ?
http://jsfiddle.net/peap/sydzL8Lc/11/
<input type="checkbox" id="checkAll" checked > Check All
<hr />
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2
<input type="checkbox" id="checkItem3"> Item3

you can do it like bellow
$('input[id^="checkItem"]').change(function(){
if($('input[id^="checkItem"]:checked').length===0)
$('#checkAll').prop('checked',true);
})
DEMO

I did a JSFiddle on the full functionality you will need including including when user click the checkAll all boxes change to checked if checkAll is checked or to not checked otherwise. Also there's a on change listener on each of them to listen if the user check all of them and to change the checkAll to checked and backwards.
HTML:
<input type="checkbox" id="checkAll"> Check All
<hr />
<div class='js-checkboxes'>
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2
<input type="checkbox" id="checkItem3"> Item3
</div>
Javascript:
$('.js-checkboxes > input').on('change', function() {
var isAllChecked = true;
$('.js-checkboxes > input').each(function() {
if (!this.checked) {
isAllChecked = false;
}
});
if (isAllChecked) {
$('#checkAll')[0].checked = true;
} else {
$('#checkAll')[0].checked = false;
}
});
$('#checkAll').on('change', function() {
if (this.checked) {
$('.js-checkboxes > input').each(function() {
this.checked = true;
});
} else {
$('.js-checkboxes > input').each(function() {
this.checked = false;
});
}
});

$("input[id^='checkItem']").change(function(){
if(!$("#checkItem1").is(":checked") && !$("#checkItem2").is(":checked") && !$("#checkItem3").is(":checked"))
{
$("#checkAll").prop("checked",true)
}
}
EDIT :- DEMO

Related

Block form submit if no one checkbox checked

I need help because confused how to block form submit if no one checkbox checked.
var $form = $('#send-invite-form');
var $checkbox = $('input[class^="invitation-friends"]');
$form.on('submit', function(e) {
$.each($checkbox, function(index, value) {
if (!$(value).is(':checked')) {
alert('Opps! You not select friends.');
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="send-invite-form">
<input type="checkbox" class="invitation-friends" value="875" />
<input type="checkbox" class="invitation-friends" value="394" />
<button type="submit">Send</submit>
</form>
The code check every checkbox. I don't want it. I want if one checkbox checked, the form can submit. If no one checked, bail submit.
Please help.

There is a way to do this that is much simpler than what you are doing. There's no need to loop. Just used the :checked pseudo-class selector to get a set of nodes that are checked and check the .length of the resulting set of nodes. If the .length is 0, no checkboxes have been checked.
$( '#send-invite-form' ).on('submit', function(e) {
if($( 'input[class^="invitation-friends"]:checked' ).length === 0) {
alert( 'Oops! You not select friends.' );
e.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="send-invite-form">
<input type="checkbox" class="invitation-friends" value="875" />
<input type="checkbox" class="invitation-friends" value="394" />
<button type="submit">Send</submit>
</form>

try this, no need to explain i think:
var found = false;
$.each( $checkbox, function(index, value) {
if( $(this).is(':checked') ) {
found = true;
}
});
if(!found){
alert( 'Opps! You not select friends.' );
e.preventDefault();
}

The first problem comes from this line :
if ( !$(value).is(':checked')) {
Should be :
if ( !$(this).is(':checked')) {
Since value contains the value of the selected checkbox not the object, so $(value) will not work.
Then if you want to submit with at least one checkbox you could check the length of checked input's like :
if( $('input.invitation-friends:checked').length == 0 )
{
return false;
}
Hope this helps.
var $form = $('#send-invite-form');
var $checkbox = $('input[class^="invitation-friends"]');
$form.on('submit', function(e) {
if( $('input.invitation-friends:checked').length == 0 )
{
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="send-invite-form">
<input type="checkbox" class="invitation-friends" value="875" />
<input type="checkbox" class="invitation-friends" value="394" />
<button type="submit">Send</submit>
</form>

Since submit button is controlling form submit, I am controlling its enable/disable status based on checkbox click
window.onload = checkBoxEventAndOnSubmitFunctionality();
function checkBoxEventAndOnSubmitFunctionality() {
let checkBoxes = document.getElementsByClassName('invitation-friends');
let checkBoxChecked = 0;
for(i=0;i<checkBoxes.length;i++) {
checkBoxes[i].onclick = function(e) {
if(e.path[0].checked) checkBoxChecked += 1;
else checkBoxChecked -= 1;
}
}
document.getElementById("send-invite-form").onsubmit = function(e) {
if(checkBoxChecked !=0) {
alert("can submit");
document.getElementById("send-invite-form").submit();
}
else {
alert("can NOT submit");
e.preventDefault();
}
}
}
<form id="send-invite-form" onsubmit="checkForCheckBoxes" method="POST">
<input type="checkbox" class="invitation-friends" value="875" />
<input type="checkbox" class="invitation-friends" value="394" />
<button type="submit" id="submitButton">Send</button>
</form>

array of checkbox value checked and unchecked

I have this function, when I checked one or more checkbox the function load the value of the checked checkbox...but when I unchecked one or more check box the function show an empty array.
this is the function:
$(document).ready(function () {
$('input[type="checkbox"]').change(function () {
var mycheck = new Array();
if ($(this).is(':checked')) {
$("#line-checkbox-1:checked").each(function () {
mycheck.push($(this).val());//aggiungo value del checked
});
alert(mycheck)
} else {
var itemtoRemove = $(this);
mycheck.splice($.inArray(itemtoRemove, mycheck), 1); //rimuovo il value del dechecked
alert(mycheck);
}
});
This is HTML of the checkbox:
<div class="col-lg-3">
<input tabindex="17" id="line-checkbox-1" type="checkbox" name="servizi" value="3">
</div>

Try This Simple Script, this works for you:
HTML
<input type="checkbox" name="options[]" value="1" />
<input type="checkbox" name="options[]" value="2" />
<input type="checkbox" name="options[]" value="3" />
<input type="checkbox" name="options[]" value="4" />
<input type="checkbox" name="options[]" value="5" />
JQUERY
$(document).ready(function ()
{
$('input[type="checkbox"]').change(function ()
{
var arr = $.map($('input:checkbox:checked'), function(e,i) {
return +e.value;
});
alert(arr);
});
});

Its probably because you are using id to reference the checkboxes and since you are creating the array from scratch everytime user changes a checkbox. you should recheck the list everytime a checkbox is changed. That means you dont need that if.( if($(this).is(":checked") )
$('.checkboxes input[type="checkbox"]').change(function () {
var mycheck = new Array();
$(".checkboxes input[type='checkbox']:checked").each(function () {
if ($(this).is(':checked')) {
mycheck.push($(this).attr("id") + ": is " + $(this).val()); //aggiungo value del checked
}
});
alert(mycheck);
});
here is a fiddle if i understand correctly what you are trying to do

How to show an alert if all checkboxes aren't checked?

I want alert if check-box is not checked (- this is working )
and
Alert if ALL check-box is not checked ( need help in this )
CheckBox :
<input type="checkbox" value="1" id="data" name="data[]">
<input type="checkbox" value="2" id="data" name="data[]">
<input type="checkbox" value="3" id="data" name="data[]">
Button :
<input name=\"submitclose\" type=\"submit\" value=\"Close\" id=\"submitclose\">
Below is my Jquery :
echo "<script>
jQuery(function($) {
$(\"input[id='submitclose']\").click(function() {
var count_checked = $(\"[id='data']:checked\").length;
if (count_checked == 0) {
alert(\"Please select a Packet(s) to Close.\");
return false;
} else{
return confirm(\"Are you sure you want to Close these Packet?\");
}
});
});
</script>";

Try,
HTML:
<input type="checkbox" value="1" id="data1" name="data[]">
<input type="checkbox" value="2" id="data2" name="data[]">
<input type="checkbox" value="3" id="data3" name="data[]">
JS:
var allCheckBox = $("[id^='data']")
var count_checked = allCheckBox.filter(":checked").length;
if (count_checked == 0) {
alert("All check boxes are not checked");
} else if(count_checked != allCheckBox.length) {
alert("some of the check boxs are not checked");
} else{
return confirm("Are you sure you want to Close these Packet?");
}

$(\"input[id='submitclose']\").click(function(){
var count = 0;
$('input#data').each(function(){
if ($(this).attr('checked') == true){
count++ //if a checkbox is checked the variable count will be greater then 0.
}
})
if (count == 0){ //nothing is checked.
alert("Please check at least one of the checkboxes");
}else{ //something is checked.
//code to execute.
}
})

Enable Disable Button if any of checkbox is checked

I have Check All and Check Non Section.
I want to take decision , if any of the checkbox is checked, enable Delete button otherwise disable it.
Plus I want to get all the values of checked checkboxes when click on Delete button coma seperated.
Here is my fiddle:
http://jsfiddle.net/48ZRu/2/
Here is my code:
HTML:
<input type="button" class="check" value="Check All" /> <input type="button" value="Delete" disabled /> <br/>
<input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/>
<input type="checkbox" class="cb-element" value="2"/> Checkbox 2 <br/>
<input type="checkbox" class="cb-element" value="3"/> Checkbox 3 <br/>
JS:
$('.check:button').click(function()
{
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).data('checked', checked);
if(checked == true)
{
$(this).val('Uncheck All');
}
else
if(checked == false)
{
$(this).val('Check All');
}
});

Try
$('.check:button').click(function () {
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$('.delete:button').prop('disabled', !checked)
$(this).data('checked', checked);
if (checked == true) {
$(this).val('Uncheck All');
} else if (checked == false) {
$(this).val('Check All');
}
});
$('input:checkbox').change(function () {
$('.delete:button').prop('disabled', $('input:checkbox:checked').length == 0)
})
$('.delete:button').click(function () {
var array = $('input:checkbox:checked').map(function () {
return this.value
}).get();
console.log(array, array.join())
})
Demo: Fiddle

Give a id to delete button. Lets say if the id is delete -
$("input[type=checkbox]").on("change", function(){
if ($("input[type=checkbox]:checked").length > 0)
{
$("#delete").removeAttr('disabled','disabled');
}
else
{
$("#delete").attr('disabled','disabled');
}
});

try this
var checkedSize = $('input:checked').size()
$(':input:button[value=Delete]').attr("disabled",checkedSize === 0);

$(function() {
var delbtn = $("input:button[value=Delete]");
$("input:checkbox").change(function() {
if($("input:checkbox:checked").length)
delbtn.removeAttr("disabled");
else
delbtn.attr("disabled","disabled");
});
delbtn.click(function() {
var s=$("input:checkbox:checked").map(function(e,i) { return e.value; }).join(",");
// s now has the values, comma separated
});
});

this one should fit all your needs:
$('.cb-element').change(function(){
var checked = !$(this).is(":checked");
if(checked)
{
$("#uncheck").removeAttr("disabled");
}
else {
$("#uncheck").attr("disabled","disabled");
}
});
$('#checkall').click(function(){
$('.cb-element').attr("checked","checked");
$("#uncheck").removeAttr("disabled");
});
$('#uncheck').click(function(){
var resultArr = [];
$.each($('.cb-element'),function(){
if($(this).is(":checked")){
resultArr.push($(this).val());
}
})
alert(resultArr.join(","))
})

<input type="button" class="check" id="checkall" value="Check All" /> <input type="button" id="remove" value="Delete" /> <br/>
<input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/>
<input type="checkbox" class="cb-element" value="2" /> Checkbox 2 <br/>
<input type="checkbox" class="cb-element" value="3" /> Checkbox 3 <br/>
$('#remove').attr('disabled', 'disabled');
$(document).ready(function() {
$('.cb-element').click(function() {
if($(this).prop('checked'))
{
$('#remove').attr('disabled', false);
}
else
{
$('#remove').attr('disabled', true);
}
});
$('.check:button').click(function()
{
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).data('checked', checked);
if(checked == true)
{
$(this).val('Uncheck All');
$('#remove').attr('disabled', false);
}
else if(checked == false)
{
$(this).val('Check All');
$('#remove').attr('disabled', true);
}
});
});

How to implement "select all" check box in HTML?

I have an HTML page with multiple checkboxes.
I need one more checkbox by the name "select all". When I select this checkbox all checkboxes in the HTML page must be selected. How can I do this?

<script language="JavaScript">
function toggle(source) {
checkboxes = document.getElementsByName('foo');
for(var checkbox in checkboxes)
checkbox.checked = source.checked;
}
</script>
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
UPDATE:
The for each...in construct doesn't seem to work, at least in this case, in Safari 5 or Chrome 5. This code should work in all browsers:
function toggle(source) {
checkboxes = document.getElementsByName('foo');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}

Using jQuery:
// Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<input type="checkbox" name="checkbox-2" id="checkbox-2" />
<input type="checkbox" name="checkbox-3" id="checkbox-3" />
<!-- select all boxes -->
<input type="checkbox" name="select-all" id="select-all" />

I'm not sure anyone hasn't answered in this way (using jQuery):
$( '#container .toggle-button' ).click( function () {
$( '#container input[type="checkbox"]' ).prop('checked', this.checked)
})
It's clean, has no loops or if/else clauses and works as a charm.

I'm surprised no one mentioned document.querySelectorAll(). Pure JavaScript solution, works in IE9+.
function toggle(source) {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
}
}
<input type="checkbox" onclick="toggle(this);" />Check all?<br />
<input type="checkbox" />Bar 1<br />
<input type="checkbox" />Bar 2<br />
<input type="checkbox" />Bar 3<br />
<input type="checkbox" />Bar 4<br />

here's a different way less code
$(function () {
$('#select-all').click(function (event) {
var selected = this.checked;
// Iterate each checkbox
$(':checkbox').each(function () { this.checked = selected; });
});
});

Demo http://jsfiddle.net/H37cb/
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});
});
</script>
<div id="wrapper">
<li style="margin-top: 20px">
<input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
<ul>
<li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
<li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
<li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
<li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
<li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
<li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
</ul>
</li>
</ul>
</li>
</div>

When you call document.getElementsByName("name"), you will get a Object. Use .item(index) to traverse all items of a Object
HTML:
<input type="checkbox" onclick="for(c in document.getElementsByName('rfile')) document.getElementsByName('rfile').item(c).checked = this.checked">
<input type="checkbox" name="rfile" value="/cgi-bin/">
<input type="checkbox" name="rfile" value="/includes/">
<input type="checkbox" name="rfile" value="/misc/">
<input type="checkbox" name="rfile" value="/modules/">
<input type="checkbox" name="rfile" value="/profiles/">
<input type="checkbox" name="rfile" value="/scripts/">
<input type="checkbox" name="rfile" value="/sites/">
<input type="checkbox" name="rfile" value="/stats/">
<input type="checkbox" name="rfile" value="/themes/">

Slightly changed version which checks and unchecks respectfully
$('#select-all').click(function(event) {
var $that = $(this);
$(':checkbox').each(function() {
this.checked = $that.is(':checked');
});
});

My simple solution allows to selectively select/deselect all checkboxes in a given portion of the form, while using different names for each checkbox, so that they can be easily recognized after the form is POSTed.
Javascript:
function setAllCheckboxes(divId, sourceCheckbox) {
divElement = document.getElementById(divId);
inputElements = divElement.getElementsByTagName('input');
for (i = 0; i < inputElements.length; i++) {
if (inputElements[i].type != 'checkbox')
continue;
inputElements[i].checked = sourceCheckbox.checked;
}
}
HTML example:
<p><input onClick="setAllCheckboxes('actors', this);" type="checkbox" />All of them</p>
<div id="actors">
<p><input type="checkbox" name="kevin" />Spacey, Kevin</p>
<p><input type="checkbox" name="colin" />Firth, Colin</p>
<p><input type="checkbox" name="scarlett" />Johansson, Scarlett</p>
</div>
I hope you like it!

<html>
<head>
<script type="text/javascript">
function do_this(){
var checkboxes = document.getElementsByName('approve[]');
var button = document.getElementById('toggle');
if(button.value == 'select'){
for (var i in checkboxes){
checkboxes[i].checked = 'FALSE';
}
button.value = 'deselect'
}else{
for (var i in checkboxes){
checkboxes[i].checked = '';
}
button.value = 'select';
}
}
</script>
</head>
<body>
<input type="checkbox" name="approve[]" value="1" />
<input type="checkbox" name="approve[]" value="2" />
<input type="checkbox" name="approve[]" value="3" />
<input type="button" id="toggle" value="select" onClick="do_this()" />
</body>
</html>

Try this simple JQuery:
$('#select-all').click(function(event) {
if (this.checked) {
$(':checkbox').prop('checked', true);
} else {
$(':checkbox').prop('checked', false);
}
});

JavaScript is your best bet. The link below gives an example using buttons to de/select all. You could try to adapt it to use a check box, just use you 'select all' check box' onClick attribute.
Javascript Function to Check or Uncheck all Checkboxes
This page has a simpler example
http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html

This sample works with native JavaScript where the checkbox variable name varies, i.e. not all "foo."
<!DOCTYPE html>
<html>
<body>
<p>Toggling checkboxes</p>
<script>
function getcheckboxes() {
var node_list = document.getElementsByTagName('input');
var checkboxes = [];
for (var i = 0; i < node_list.length; i++)
{
var node = node_list[i];
if (node.getAttribute('type') == 'checkbox')
{
checkboxes.push(node);
}
}
return checkboxes;
}
function toggle(source) {
checkboxes = getcheckboxes();
for (var i = 0 n = checkboxes.length; i < n; i++)
{
checkboxes[i].checked = source.checked;
}
}
</script>
<input type="checkbox" name="foo1" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo2" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo3" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo4" value="bar4"> Bar 4<br/>
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
</body>
</html>

It's rather simple:
const selectAllCheckboxes = () => {
const checkboxes = document.querySelectorAll('input[type=checkbox]');
checkboxes.forEach((cb) => { cb.checked = true; });
}

If adopting the top answer for jQuery, remember that the object passed to the click function is an EventHandler, not the original checkbox object. Therefore code should be modified as follows.
HTML
<input type="checkbox" name="selectThemAll"/> Toggle All<br/>
<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
Javascript
$(function() {
jQuery("[name=selectThemAll]").click(function(source) {
checkboxes = jQuery("[name=foo]");
for(var i in checkboxes){
checkboxes[i].checked = source.target.checked;
}
});
})

<asp:CheckBox ID="CheckBox1" runat="server" Text="Select All" onclick="checkAll(this);" />
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem Value="Item 1">Item 1</asp:ListItem>
<asp:ListItem Value="Item 2">Item 2</asp:ListItem>
<asp:ListItem Value="Item 3">Item 3</asp:ListItem>
<asp:ListItem Value="Item 4">Item 4</asp:ListItem>
<asp:ListItem Value="Item 5">Item 5</asp:ListItem>
<asp:ListItem Value="Item 6">Item 6</asp:ListItem>
</asp:CheckBoxList>
<script type="text/javascript">
function checkAll(obj1) {
var checkboxCollection = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName('input');
for (var i = 0; i < checkboxCollection.length; i++) {
if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") {
checkboxCollection[i].checked = obj1.checked;
}
}
}
</script>

that should do the job done:
$(':checkbox').each(function() {
this.checked = true;
});

You may have different sets of checkboxes on the same form. Here is a solution that selects/unselects checkboxes by class name, using vanilla javascript function document.getElementsByClassName
The Select All button
<input type='checkbox' id='select_all_invoices' onclick="selectAll()"> Select All
Some of the checkboxes to select
<input type='checkbox' class='check_invoice' id='check_123' name='check_123' value='321' />
<input type='checkbox' class='check_invoice' id='check_456' name='check_456' value='852' />
The javascript
function selectAll() {
var blnChecked = document.getElementById("select_all_invoices").checked;
var check_invoices = document.getElementsByClassName("check_invoice");
var intLength = check_invoices.length;
for(var i = 0; i < intLength; i++) {
var check_invoice = check_invoices[i];
check_invoice.checked = blnChecked;
}
}

This is what this will do, for instance if you have 5 checkboxes, and you click check all,it check all, now if you uncheck all the checkbox probably by clicking each 5 checkboxs, by the time you uncheck the last checkbox, the select all checkbox also gets unchecked
$("#select-all").change(function(){
$(".allcheckbox").prop("checked", $(this).prop("checked"))
})
$(".allcheckbox").change(function(){
if($(this).prop("checked") == false){
$("#select-all").prop("checked", false)
}
if($(".allcheckbox:checked").length == $(".allcheckbox").length){
$("#select-all").prop("checked", true)
}
})

As I cannot comment, here as answer:
I would write Can Berk Güder's solution in a more general way,
so you may reuse the function for other checkboxes
<script language="JavaScript">
function toggleCheckboxes(source, cbName) {
checkboxes = document.getElementsByName(cbName);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
<input type="checkbox" onClick="toggleCheckboxes(this,\'foo\')" /> Toggle All<br/>
<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
<input type="checkbox" name="foo" value="bar5"> Bar 5<br/>

$(document).ready(function() {
$(document).on(' change', 'input[name="check_all"]', function() {
$('.cb').prop("checked", this.checked);
});
});

Using jQuery and knockout:
With this binding main checkbox stays in sync with underliying checkboxes, it will be unchecked unless all checkboxes checked.
ko.bindingHandlers.allChecked = {
init: function (element, valueAccessor) {
var selector = valueAccessor();
function getChecked () {
element.checked = $(selector).toArray().every(function (checkbox) {
return checkbox.checked;
});
}
function setChecked (value) {
$(selector).toArray().forEach(function (checkbox) {
if (checkbox.checked !== value) {
checkbox.click();
}
});
}
ko.utils.registerEventHandler(element, 'click', function (event) {
setChecked(event.target.checked);
});
$(window.document).on('change', selector, getChecked);
ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
$(window.document).off('change', selector, getChecked);
});
getChecked();
}
};
in html:
<input id="check-all-values" type="checkbox" data-bind="allChecked: '.checkValue'"/>
<input id="check-1" type="checkbox" class="checkValue"/>
<input id="check-2" type="checkbox" class="checkValue"/>

to make it in short-hand version by using jQuery
The select all checkbox
<input type="checkbox" id="chkSelectAll">
The children checkbox
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
jQuery
$("#chkSelectAll").on('click', function(){
this.checked ? $(".chkDel").prop("checked",true) : $(".chkDel").prop("checked",false);
})

Below methods are very Easy to understand and you can implement existing forms in minutes
With Jquery,
$(document).ready(function() {
$('#check-all').click(function(){
$("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function(){
$("input:checkbox").attr('checked', false);
});
});
in HTML form put below buttons
<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a>
With just using javascript,
<script type="text/javascript">
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document[formname].getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
in HTML form put below buttons
<button onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</button>
<button onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</button>

Here is a backbone.js implementation:
events: {
"click #toggleChecked" : "toggleChecked"
},
toggleChecked: function(event) {
var checkboxes = document.getElementsByName('options');
for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].checked = event.currentTarget.checked;
}
},

html
<input class='all' type='checkbox'> All
<input class='item' type='checkbox' value='1'> 1
<input class='item' type='checkbox' value='2'> 2
<input class='item' type='checkbox' value='3'> 3
javascript
$(':checkbox.all').change(function(){
$(':checkbox.item').prop('checked', this.checked);
});

1: Add the onchange event Handler
<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>
2: Modify the code to handle checked/unchecked
function checkAll(ele) {
var checkboxes = document.getElementsByTagName('input');
if (ele.checked) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
console.log(i)
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
}

You can Use This code.
var checkbox = document.getElementById("dlCheckAll4Delete");
checkbox.addEventListener("click", function (event) {
let checkboxes = document.querySelectorAll(".dlMultiDelete");
checkboxes.forEach(function (ele) {
ele.checked = !!checkbox.checked;
});
});

You can use this simple code
$('.checkall').click(function(){
var checked = $(this).prop('checked');
$('.checkme').prop('checked', checked);
});

Maybe a bit late, but when dealing with a check all checkbox, I believe you should also handle the scenario for when you have the check all checkbox checked, and then unchecking one of the checkboxes below.
In that case it should automatically uncheck the check all checkbox.
Also when manually checking all the checkboxes, you should end up with the check all checkbox being automatically checked.
You need two event handlers, one for the check all box, and one for when clicking any of the single boxes below.
// HANDLES THE INDIVIDUAL CHECKBOX CLICKS
function client_onclick() {
var selectAllChecked = $("#chk-clients-all").prop("checked");
// IF CHECK ALL IS CHECKED, AND YOU'RE UNCHECKING AN INDIVIDUAL BOX, JUST UNCHECK THE CHECK ALL CHECKBOX.
if (selectAllChecked && $(this).prop("checked") == false) {
$("#chk-clients-all").prop("checked", false);
} else { // OTHERWISE WE NEED TO LOOP THROUGH INDIVIDUAL CHECKBOXES AND SEE IF THEY ARE ALL CHECKED, THEN CHECK THE SELECT ALL CHECKBOX ACCORDINGLY.
var allChecked = true;
$(".client").each(function () {
allChecked = $(this).prop("checked");
if (!allChecked) {
return false;
}
});
$("#chk-clients-all").prop("checked", allChecked);
}
}
// HANDLES THE TOP CHECK ALL CHECKBOX
function client_all_onclick() {
$(".client").prop("checked", $(this).prop("checked"));
}

We Keep Coding

JavaScript is the programming language of the Web.

How to checked checkbox main when sub checkbox not checked? - javascript

you can do it like bellow $('input[id^="checkItem"]').change(function(){ if($('input[id^="checkItem"]:checked').length===0) $('#checkAll').prop('checked',true); }) DEMO

$("input[id^='checkItem']").change(function(){ if(!$("#checkItem1").is(":checked") && !$("#checkItem2").is(":checked") && !$("#checkItem3").is(":checked")) { $("#checkAll").prop("checked",true) } } EDIT :- DEMO

Related

Block form submit if no one checkbox checked

array of checkbox value checked and unchecked

How to show an alert if all checkboxes aren't checked?

Enable Disable Button if any of checkbox is checked

How to implement "select all" check box in HTML?

Categories

Resources