Jquery check /uncheck all checkboxes when click a button

mlucicom
Posts: 32

Jquery check /uncheck all checkboxes when click a button

Hello! I have this jquery script that get all checkboxes from a div and check all at button click:

Code: Select all

<script> $("#check'.$id22.'").click(function(){ $("#check'.$id22.'").find("input[type=checkbox]").each(function () { // some staff this.checked = true; }); }); </script>
At a second click on the same button, how can i uncheck all checkboxes?
When clicking the button, the script must check/uncheck only the checkboxes from specified div.
I have many div that have checkboxes .

Admin
Hello
Try addapt the code from this example to your script:

Code: Select all

<div id="check1"> <input type="checkbox" value="1" />Chb-1 <input type="checkbox" value="2" />Chb-2 <input type="checkbox" value="3" />Chb-3<br> <button id="1" class="btns">Click</button> </div> <div id="check2"> <input type="checkbox" value="1" />Chb-1a <input type="checkbox" value="2" />Chb-2a <input type="checkbox" value="3" />Chb-3a<br> <button id="2" class="btns">Click</button> </div> <script> //check, uncheck all checkbox in div (a css selector) function chkUnchk(div){ $(div).find("input[type=checkbox]").each(function(){ //parse all checkbox from div if($(this).attr("checked")){ $(this).removeAttr("checked"); $(this).prop("checked",false); } else{ $(this).attr("checked", "checked"); $(this).prop("checked",true); } }); } //when click the button call chkUnchk() with id of div with checkboxes $(".btns").click(function(){ chkUnchk("#check"+$(this).attr('id')); }); </script>
- Demo:
Chb-1 Chb-2 Chb-3
Chb-1a Chb-2a Chb-3a

mlucicom
I tried to adapt this code at my script, but this don' work

Code: Select all

<?php $servername = "localhost"; $username = ""; $password = ""; $dbname = ""; require('layout.php'); // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = ".. "; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { $var = $row["GROUP_CONCAT(area.id ORDER BY area.id SEPARATOR ', ')"]; $location = $row['location']; $id22= $row['id22']; $each=explode(', ',$var); echo '<form action="report.php?id='.$id22.'" method="post"> <div id="'.$id22.'"> <div class="col-md-3"> <div class="box box-warning"> <div class="box-header with-border"> <h3 class="box-title"><input type="checkbox" name="data2[]" value="'.$location.'">'.$location.'</h3> <button type="button" id="'.$id22.'" class="btns">Click</button> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> </div> <!-- /.box-tools --> </div> <!-- /.box-header --> <div class="box-body" id="content'.$id22.'"> </div> <a href="contact.php?id='.$id22.'"> <button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-envelope"></span> Contact </button></a> <a href="report.php?id='.$id22.'"> <button type="submit" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-warning-sign"></span>Report </button></a> <a href="satisfaction.php?id='.$id22.'"> <button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-heart-empty"></span>Satisfaction </button></a> <!-- /.box-body --> </div> <!-- /.box --> </div> </div>'; $link2 = "http://elitservice.dk/sistem/area"; foreach($each as $v){ $q=$conn->query("SELECT `area`.`id` AS `area_id22` , `area`.`area` , `area`.`id_principal` AS `id22` , `area_description`.`id` , `area_description`.`description` , `area_description`.`id_area`,GROUP_CONCAT(area_images.patch ORDER BY area_images.patch SEPARATOR ', ') FROM `area` , `area_description`, `area_images` WHERE `area`.`id` ='" . $v. "' AND `area_description`.`id_area` = `area`.`id` AND `area_images`.`id_area` = `area`.`id` GROUP BY `area`.`area` " ); foreach($q as $cat){ $id_p = $cat['area_id22']; $area_id = $cat['area_id22']; $area = $cat['area']; $descriere = $cat['description']; $imagini = $cat["GROUP_CONCAT(area_images.patch ORDER BY area_images.patch SEPARATOR ', ')"]; echo '<script type="text/javascript"> var theDiv = document.getElementById("content'.$id22.'"); //Here we escape single quotes in php string, to have double-quotes inside string with single-quotes in JS theDiv.innerHTML +=\'<button type="button" data-toggle="collapse" class="btn btn-info" data-target="#'. str_replace('"', '\"', $id_p) .'"><input type="checkbox" name="data2[]" value="'.$area.'">'. str_replace('"', '\"', $area) .' </button><br/><div id="'. str_replace('"', '\"', $id_p) .'" class="collapse">'. str_replace('"', '\"', $descriere) .'</div><br/>\'; </script>'; $myArray = explode(',',$imagini); foreach($myArray as $value){ echo '<script type="text/javascript"> var theDiv = document.getElementById("'.$id_p.'"); theDiv.innerHTML +=\'<br/><img src="http://elitservice.dk/sistem/area/'.ltrim($value).'" alt="Smiley face" height="100" width="100">\'; </script>'; } $linkq=$conn->query(" SELECT `section`.`section` ,`section`.`id` AS `idse`, `section_description`.`description` ,GROUP_CONCAT(section_images.patch2 ORDER BY section_images.patch2 SEPARATOR ', ') FROM `section` , `section_description`, `section_images` WHERE `section`.`area_id` ='" . $cat['area_id22'] . "' AND `section_description`.`area_id` = '" . $cat['area_id22'] . "' AND `section`.`id` = `section_description`.`section_name` AND `section_images`.`section_name` = `section`.`id` AND `section_images`.`area_id` = '" . $cat['area_id22'] . "' GROUP BY `section`.`section` "); foreach($linkq as $link){ $idse = $link['idse']; $section =$link['section']; $desc = $link['description']; $imagini2 = $link["GROUP_CONCAT(section_images.patch2 ORDER BY section_images.patch2 SEPARATOR ', ')"]; echo '<script type="text/javascript"> var theDiv = document.getElementById("'.$id_p.'"); //Here we escape single quotes in php string, to have double-quotes inside string with single-quotes in JS theDiv.innerHTML +=\'<br/><button type="button" data-toggle="collapse" style="margin: -20px -50px;position:relative;top:50%;left:50%;" class="btn btn-warning" data-target="#'. str_replace('"', '\"', $idse) .'"><input type="checkbox" name="data2[]" value="'.$section.'">'. str_replace('"', '\"', $section) .' </button><br/><div id="'. str_replace('"', '\"', $idse) .'" class="collapse">'. str_replace('"', '\"', $desc) .'</div>\'; </script>'; $myArray2 = explode(',',$imagini2); foreach($myArray2 as $value2){ echo '<script type="text/javascript"> var theDiv = document.getElementById("'.$idse.'"); theDiv.innerHTML +=\'<br/><img src="http://elitservice.dk/sistem/area/'.ltrim($value2).'" alt="Smiley face" height="100" width="100">\'; </script>'; } } } } } } else { echo "0 results"; } $conn->close(); ?> <script> //check, uncheck all checkbox in div (a css selector) function chkUnchk(div){ $(div).find("input[type=checkbox]").each(function(){ //parse all checkbox from div if($(this).attr("checked")){ $(this).removeAttr("checked"); $(this).prop("checked",false); } else{ $(this).attr("checked", "checked"); $(this).prop("checked",true); } }); } //when click the button call chkUnchk() with id of div with checkboxes $(".btns").click(function(){ chkUnchk("#check"+$(this).attr('id')); }); </script>

Admin
Hy,
To much code and i cannot test it because i not have the necessary database.
Study better the example I have gave above, that it works.
- If the <button> has:

Code: Select all

id="'.$id22.'"
- the associated Div with checkboxes must have:

Code: Select all

id="check'.$id22.'"

Similar Topics