I have 3 Divs, every div contains 2 inputs, I want to only check checkboxes in the same div with id and unchecked from other divs.
HTML is :
<div class="dashboard">
<div id="fr">
<h3>Fruits</h3>
<label>
<input type="checkbox" name="check1" />Kiwi</label>
<label>
<input type="checkbox" name="check2" />Jackfruit</label>
</div>
<div id="an">
<h3>Animals</h3>
<label>
<input type="checkbox" name="check1" />Tiger</label>
<label>
<input type="checkbox" name="check2" />Sloth</label>
</div>
<div id="veg">
<h3>vegetables</h3>
<label>
<input type="checkbox" name="check1" />Tiger</label>
<label>
<input type="checkbox" name="check2" />Sloth</label>
</div>
</div>
and JQuery is :
$("input:checkbox").on('click', function() {
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
see live example
If you only want to allow checkboxes to be checked within a single div, you can use jQuery to traverse the DOM using closest(), siblings() and find() to retrieve the external checkboxes before de-selecting them.
Try this:
$("input:checkbox").on('change', e => {
$(e.target).closest('div').siblings().find('input:checkbox').prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashboard">
<div id="fr">
<h3>Fruits</h3>
<label><input type="checkbox" name="check1" />Kiwi</label>
<label><input type="checkbox" name="check2" />Jackfruit</label>
</div>
<div id="an">
<h3>Animals</h3>
<label><input type="checkbox" name="check1" />Tiger</label>
<label><input type="checkbox" name="check2" />Sloth</label>
</div>
<div id="veg">
<h3>vegetables</h3>
<label><input type="checkbox" name="check1" />Tiger</label>
<label><input type="checkbox" name="check2" />Sloth</label>
</div>
</div>
Related
My checkBoxes are dynamic and I only need to check condition if my checkbox with "OTHERS" are clicked or not.So My checkboxes are:
<div class="form-group" id="documents">
<label> <input id="check_id1" type="checkbox" value="1" class="chk1" checked=""> <span>Invoice</span>
<br>
</label>
<div style="padding-bottom: 5px"></div>
<label> <input id="check_id2" type="checkbox" value="2" class="chk2" checked=""> <span>Packing List</span>
<br>
</label>
<div style="padding-bottom: 5px"></div>
<label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>
<br>
</label>
<div style="padding-bottom: 5px"></div>
</div>
So i tried to check if the "Others" checkboxes is checked or not but alert() is not triggered.
if($("span:contains('OTHERS')").prop('checked') == true){
alert("here");
}
you are not checking prop if input elm instead you are checking prop of span use this code
//gets the input
const elm = $("span:contains('OTHERS')").siblings()[0];
if($(elm).prop('checked')) alert("here");
It seems, we need to first check if Checkbox is checked or not, and then check if its siblings text value is equal to 'OTHERS'.
I have triggered the alert in this way:
$("input[type='checkbox']").change(function(){
if($(this).prop('checked') == true && $(this).siblings("span").text() == "OTHERS"){
alert("here");
}
});
We can also change HTML to simplify it further by directly assigning value="OTHERS" to checkbox.
$("input[value='OTHERS']").change(function(){
if($(this).prop('checked') == true){
alert("here");
}
});
This will look across all checkboxes and check the one that has 'OTHERS'.
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#check').addEventListener('click', () => {
document.querySelectorAll('input[type="checkbox"]').forEach(chk => {
if(chk.parentNode.querySelector('span').innerText == 'OTHERS') {
alert(chk.checked);
}
});
});
});
<div class="form-group" id="documents">
<label> <input id="check_id1" type="checkbox" value="1" class="chk1" checked=""> <span>Invoice</span>
<br>
</label>
<div style="padding-bottom: 5px"></div>
<label> <input id="check_id2" type="checkbox" value="2" class="chk2" checked=""> <span>Packing List</span>
<br>
</label>
<div style="padding-bottom: 5px"></div>
<label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>
<br>
</label>
<div style="padding-bottom: 5px"></div>
</div>
<!-- Just for the answer -->
<button id="check">Check</button>
This is a DOM traversal issue - you need to go from the span UP to the parent and then DOWN to find the input- that is checked.
Also - note that putting checked="" in the input is the equivalent of checked="checked" - which is why this is showing as checked in the snippet.
EDIT - solution updated to allow the variable to be set based on the click of the label of "OTHERS"
let myvariable;
$('label').click(function(){
let spanText = $(this).find('span').text();
let inputChecked = $(this).find('input').is(':checked')
if(spanText == 'OTHERS' && inputChecked){
myvariable = 3;
alert(myvariable);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="documents">
<label> <input id="check_id1" type="checkbox" value="1" class="chk1"> <span>Invoice</span>
<br>
</label>
<div style="padding-bottom: 5px"></div>
<label> <input id="check_id2" type="checkbox" value="2" class="chk2"> <span>Packing List</span>
<br>
</label>
<div style="padding-bottom: 5px"></div>
<label> <input id="check_id3" type="checkbox" value="3" class="chk3"> <span>OTHERS</span>
<br>
</label>
<div style="padding-bottom: 5px"></div>
</div>
try this
const elm = $("span:contains('OTHERS')").closest("label").find("input[type=checkbox]");
if($(elm).prop('checked')) alert("here");
Before I had used the class for getting the value of checked checkbox storing in array.
<div class="form-check">
<div class="form-group">
<label> <input id="check_id" type="checkbox"
value=1 class="chk" /> <span>Invoice</span>
</label>
<label> <input id="check_id" type="checkbox"
value=2 class="chk" /> <span>Packing List</span>
</label>
</div>
</div>
And it was successfully stored in array as :
$(".chk").click(function() {
getValueUsingClass();
});
function getValueUsingClass(){
$(':checkbox:checked').each(function(i){
chkArray[i] = $(this).val();
});
}
It was working fine until i changed the class name from .chk1 and .chk2. So I needed to change the class to chk1 and chk2
<div class="form-check">
<div class="form-group">
<label> <input id="check_id" type="checkbox"
value=1 class="chk1" /> <span>Invoice</span>
</label>
<label> <input id="check_id" type="checkbox"
value=2 class="chk2" /> <span>Packing List</span>
</label>
</div>
</div>
There may be more than these 2 checkboxes(I have only shown 2 as it is dynamic) there may be checkbox from .chk1 to .chk15 .How can i store checked checkbox in array when their class name is different?
Try this code
$("input[class^=chk]").click(function() {
$('#result').html(getValueUsingClass().join(" | "));
});
function getValueUsingClass(){
var arr = [];
$(':checkbox:checked').each(function(){
arr.push($(this).val());
});
return arr;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<div class="form-group">
<label> <input id="check_id1" type="checkbox"
value=1 class="chk1" /> <span>Invoice</span>
</label>
<label> <input id="check_id2" type="checkbox"
value=2 class="chk2" /> <span>Packing List</span>
</label>
</div>
</div><div id="result"></div>
Please let me know your views over it.
Try using the Starts with from jQuery Starts with selector.
You can use this as $(input[class^='chk'])
$('input[class^="chk"]').click(function() {
var arr = getValueUsingClass();
console.log(arr);
});
function getValueUsingClass() {
var chkArray = [];
$('input[class^="chk"]:checkbox:checked').each(function(i) {
chkArray[i] = $(this).val();
});
return chkArray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="form-check">
<div class="form-group">
<label> <input type="checkbox"
value=1 class="chk1" /> <span>Invoice</span>
</label>
<label> <input type="checkbox"
value=2 class="chk2" /> <span>Packing List</span>
</label>
</div>
</div>
You can use jQuery's Attribute Starts With Selector that selects elements that have the specified attribute with a value beginning exactly with a given string.
Please Note: The attribute id must be unique in a document.
$("input[class^=chk]").click(function() {
getValueUsingClass();
});
function getValueUsingClass(){
var chkArray = [];
$(':checkbox:checked').each(function(i){
chkArray.push($(this).val());
});
console.log(chkArray);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<div class="form-group">
<label> <input id="check_id1" type="checkbox"
value=1 class="chk1" /> <span>Invoice</span>
</label>
<label> <input id="check_id2" type="checkbox"
value=2 class="chk2" /> <span>Packing List</span>
</label>
</div>
</div>
you can achieve this without any class name:
function getValueUsingClass(){
$('input[type="checkbox"]:checked').each(function(i){
chkArray[i] = $(this).val();
});
}
I've a set of checkboxes in a form. Like below,
<div>
<label><input type="checkbox" id="main-dish-9">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="main-dish-12">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9</label>
</div>
When a page loads, only the check boxes with the id main-dish are enabled, others are read-only. In this case when I click on the checkbox with an id starting with main-dish, It should make all the checkboxes below it starting with the id sub-dishes to be enabled. If someone checked the main-dish, then it also must select any checkbox with an id starting with sub-dishes.
(jQuery)("input[type='checkbox'][id*='main-dish']", context).click(function () {
(jQuery)("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true);
})
Use nextUntil() which selects the next elements until it finds the one with the selector of main-dish, this function takes as input a list of elements and selects all elements until the label with a id of main-dish-*,from there we select the checkbox and we toggle the disabled property
$("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true);
$("input[type='checkbox'][id*='main-dish']").click(function() {
var inputs = $(this).closest('label').nextUntil($("input[type='checkbox'][id*='main-dish']").closest('label')).find('input');
inputs.prop('disabled', !inputs.prop('disabled'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="main-dish-9">Id 9</label>
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9</label>
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9</label>
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9</label>
<label>
<input type="checkbox" id="main-dish-12">Id 9</label>
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9</label>
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9</label>
Demo with wrapped div
$("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true);
$("input[type='checkbox'][id*='main-dish']").click(function() {
var inputs = $(this).closest('.wrap-input').nextUntil($("input[type='checkbox'][id*='main-dish']").closest('.wrap-input')).find('input');
inputs.prop('disabled', !inputs.prop('disabled'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input">
<label>
<input type="checkbox" id="main-dish-9">Id 9</label>
</div>
<div class="wrap-input">
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9</label>
</div>
<div class="wrap-input">
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9</label>
</div>
<div class="wrap-input">
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9</label>
</div>
<div class="wrap-input">
<label>
<input type="checkbox" id="main-dish-12">Id 9</label>
</div>
<div class="wrap-input">
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9</label>
</div>
<div class="wrap-input">
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9</label>
</div>
var selected = [];
$('#checkboxes input:checked').each(function() {
selected.push($(this).attr('name'));
});
By using true you are still disabling the check boxes, it should be set to false
(jQuery)("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', false);
I think simplier way to use class selectors and wrapper.
Html:
<div>
<label> <input type="checkbox" class="main-dish">Id 9 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 9.1 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 9.2 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 9.3 </label>
</div>
<div>
<label> <input type="checkbox" class="main-dish">Id 10 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 10.1 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 10.2 </label>
</div>
JavaScript
$(document).ready(function() {
$(".main-dish").click(function() {
var $inp = $(this).parent().parent().find(">label>.sub-dishes-cuisine");
if ($inp.is("[disabled]")){
$inp.removeAttr('disabled');
} else {
$inp.attr('disabled', true);
}
})
});
I am breaking my head trying to make it work. I think the solution is not that hard to find but my brain will explode soon...
So I have a bunch of div with the class process
Inside each div, I have a variable amount of checkbox.
I want to to trigger an event when all the checkbox are checked BUT the ones inside the last process class.
This is the base
if(!$(':checkbox').not(':checked').length > 0)
{
//All checkbox are checked
}
So I tried to
if(!$(':checkbox').not('.process:last').not(':checked').length > 0)
But this is not the solution.
From your question, I assume the following HTML and found you the solution:
$(function () {
$(".check").click(function () {
alert($(".process:not(.process:last)").find(":checkbox").length == $(".process:not(.process:last)").find(":checkbox:checked").length ? "Yes" : "No");
});
$(".check_all").click(function () {
$(".process").find(":checkbox").prop("checked", true);
});
$(".check_no_last").click(function () {
$(".process:not(.process:last)").find(":checkbox").prop("checked", true);
});
});
label {display: inline-block; margin: 5px 25px;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div class="process">
<div>Process #1
<label><input type="checkbox" name="" id=""> Checkbox 1</label>
<label><input type="checkbox" name="" id=""> Checkbox 2</label>
<label><input type="checkbox" name="" id=""> Checkbox 3</label>
</div>
</div>
<div class="process">
<div>Process #2
<label><input type="checkbox" name="" id=""> Checkbox 1</label>
<label><input type="checkbox" name="" id=""> Checkbox 2</label>
<label><input type="checkbox" name="" id=""> Checkbox 3</label>
</div>
</div>
<div class="process">
<div>Process #3
<label><input type="checkbox" name="" id=""> Checkbox 1</label>
<label><input type="checkbox" name="" id=""> Checkbox 2</label>
<label><input type="checkbox" name="" id=""> Checkbox 3</label>
</div>
</div>
<div class="process">
<div>Process #4
<label><input type="checkbox" name="" id=""> Checkbox 1</label>
<label><input type="checkbox" name="" id=""> Checkbox 2</label>
<label><input type="checkbox" name="" id=""> Checkbox 3</label>
</div>
</div>
<div class="process">
<div>Process #5
<label><input type="checkbox" name="" id=""> Checkbox 1</label>
<label><input type="checkbox" name="" id=""> Checkbox 2</label>
<label><input type="checkbox" name="" id=""> Checkbox 3</label>
</div>
</div>
<input type="submit" value="Check All" class="check_all" />
<input type="submit" value="Check But Last" class="check_no_last" />
<input type="submit" value="Check" class="check" />
You may try something like this:
$('div.process:last input[type="checkbox"]').on('change', function() {
var countOfAllCheckboxes = $(this).parent().find(':checkbox');
var countOfAllCheckedCheckboxes = countOfAllCheckboxes.filter(':checked');
if(countOfAllCheckedCheckboxes.length == countOfAllCheckboxes.length) {
alert('All checkboxes are checked in last div.process!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="process">
<input type="checkbox" name="chk" /> Checkbox1 in First Div
</div>
<div class="process">
<input type="checkbox" name="chk"/> Checkbox1 in Last Div.process
<input type="checkbox" name="chk"/> Checkbox2 in Last Div.process
<div>
i have a group of check boxes and i want to use a check all function but only for the corresponding checkboxes for example if i click checkAll1 it will only highlight checkItem 1 but also will still allow me to check other check boxes.
you will see from the snippet below the code i currently have, i want to also be able to put the checkAll label when it comes out to the #check div to be in a p tag so i can style it.
hope this all makes sense
Many thanks
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can use value to call checkbox, Do something like this..
var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");
var chk4 = $("input[type='checkbox'][value='4']");
var chk5 = $("input[type='checkbox'][value='5']");
var chk6 = $("input[type='checkbox'][value='6']");
chk1.on('change', function(){
chk2.prop('checked',this.checked);
});
chk3.on('change', function(){
chk4.prop('checked',this.checked);
});
chk5.on('change', function(){
chk6.prop('checked',this.checked);
});
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + "<p></p>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1" value="1"><label for="checkAll1" >Check All</label>
<input type="checkbox" id="checkItem1" value="2"> <label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item 2</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item3</label>
<hr />
<input type="checkbox" id="checkAll2" value="3"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3" value="5"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3" value="6"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
I tweak your code a little, and what you mean by able to put the checkAll label when it comes out to the #check div which i did't get it, try this below code :
$("input[type='checkbox']").change(function() {
$("#checked").empty();
$("input[type='checkbox']:checked").each(function() {
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
$(".checkAll").click(function() {
if ( $(this).is(':checked') )
$(this).siblings(':checkbox').prop('checked', true);
else
$(this).siblings(':checkbox').prop('checked', false);
});
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll1" class="checkAll">
<label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll2" class="checkAll">
<label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll3" class="checkAll">
<label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item3</label>
</div>
<p>You have selected:</p>
<div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
p/s : like other said, id must be unique for elements
Assign a same class for the same row check boxes
Use the below jquery
$("#checkAll1").change(function(){
$(".checkItem1").prop("checked", true);
});
$("#checkAll2").change(function(){
$(".checkItem2").prop("checked", true);
});
$("#checkAll3").change(function(){
$(".checkItem3").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" class="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" class="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
let me know if it is helpful