Check the checkboxes between divs

Check the checkboxes between divs - javascript

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);
}
})
});

Related

Allow Only Checkboxes in same div to be Checked using jQuery

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>

get the checkbox value to a div html

i want to display all the values of the checked checkbox in a div
here is my code, how can i make it become multiple function?
$('[type="checkbox"]').on('change', function() {
var val = this.checked ? this.value : '';
$('#cs-input').html(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cs-input"></div>
<div id="CS-popup" class="popup-windows ">
<input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX">GMSC01
<input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX">GMSC02
<input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX">VMSC01
<br>
<input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX">VMSC02
<input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX">GMGW01
<input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX">GMGW02
<br>
<input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX">VMGW01
<input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX">VMGW02
<input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX">SPS01
<br>
<input type="checkbox" name="CS" value="SPS02" data-selector="SPS02BOX">SPS02
<input type="checkbox" name="CS" value="HSS01" data-selector="HSS01BOX">HSS01
<input type="checkbox" name="CS" value="HSS02" data-selector="HSS02BOX">HSS02
<br>
</div>
http://jsfiddle.net/Wy22s/1348/

Your current logic is only reading the value of the last clicked checkbox. Instead you can use map() to build an array of all the checked values, then join() the resulting array together as a string to be displayed, something like this:
$(':checkbox').on('change', function() {
var values = $(':checkbox:checked').map(function() {
return this.value;
}).get().join(', ');
$('#cs-input').html(values);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cs-input"></div>
<div id="CS-popup" class="popup-windows ">
<label>
<input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX" />GMSC01
</label>
<label>
<input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX" />GMSC02
</label>
<label>
<input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX" />VMSC01
</label><br />
<label>
<input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX" />VMSC02
</label>
<label>
<input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX" />GMGW01
</label>
<label>
<input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX" />GMGW02
</label><br />
<label>
<input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX" />VMGW01
</label>
<label>
<input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX" />VMGW02
</label>
<label>
<input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX" />SPS01
</label><br />
<label>
<input type="checkbox" name="CS" value="SPS02" data-selector="SPS02BOX" />SPS02
</label>
<label>
<input type="checkbox" name="CS" value="HSS01" data-selector="HSS01BOX" />HSS01
</label>
<label>
<input type="checkbox" name="CS" value="HSS02" data-selector="HSS02BOX" />HSS02
</label><br />
</div>
Note the use of the :checkbox selector over [type="checkbox"] and :checked within the handler to retrieve only those which have been chosen.
Also note the addition of label elements to make the hit area of each checkbox include the text next to it.

Enabling Submit Button after clicking checkbox

I have been struggling with getting the following code to work (example taken from jsfiddle after looking at responses in this forum.
Can anyone see where I'm going wrong?
<script type="text/javascript">
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>

JQuery checkbox selector which are not in a specific class

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>

check all function with outputting labels into a 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

We Keep Coding

JavaScript is the programming language of the Web.

Check the checkboxes between divs - javascript

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);

Related

Allow Only Checkboxes in same div to be Checked using jQuery

get the checkbox value to a div html

Enabling Submit Button after clicking checkbox

JQuery checkbox selector which are not in a specific class

check all function with outputting labels into a div

Categories

Resources