check all function with outputting labels into a div - javascript

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

Related

How to dynamic check whether checkbox is in another table Javascript/PHP?

I have two tables, table 1 with the fields of webID, project, web, and I use below PHP code(ThinkPHP framework) to get project list:
$project = M('WebProjectList')->where(array('web' => self::$web))->getField('project', true);
table 2 with the fields of userID, issue, web, project and I use below PHP code to get issue list:
$where['web'] = self::$web;
$where['project'] = array('in', $project);
$issue = M('UserIssue')->where($where)->group('issue')->getField('issue',true);
Below code in .js is the multiple-choice/checkbox of both projects and issues that let user choose, when user choose an issue which does not belong to that project, how to reminder user to check again before submitting?
$('.project2').each(function (index) {
var project = result[index].project;
for (var i in project) {
var item = $('input[value="' + project[i] + '"]');
$(this).find(item).attr('checked', 'checked');
}
});
$('.issue2').each(function (index) {
var issue = result[index].issue;
for (var i in issue) {
var item1 = $('input[value="' + issue[i] + '"]');
$(this).find(item1).attr('checked', 'checked');
}
});
And html code as below:
<th>Project</th>
<td>
<div style="width: 800px" class="project2">
<foreach name="projectlist" item="item">
<label style="display: inline-block">
<input type="checkbox" name="project" style="height: 18px;width: 18px" value="{$item}"/>
{$item}
</label>
</foreach>
<input type="checkbox" name="project" style="display: none" value="all" checked>
</div>
</td>
</tr>
<tr>
<th>Issue</th>
<td>
<div style="width: 800px" class="issue2">
<foreach name="issueList" item="item1">
<label style="display: inline-block">
<input type="checkbox" name="issue" style="height: 18px;width: 18px" value="{$item1}"/>
{$item1}
</label>
</foreach>
<input type="checkbox" name="issue" style="display: none" value="all" checked>
</div>
</td>
</tr>
and the actual html from inspect as below:
$('.project2').each(function(index) {
var project = result[index].project;
for (var i in project) {
var item = $('input[value="' + project[i] + '"]');
$(this).find(item).attr('checked', 'checked');
}
});
$('.issue2').each(function(index) {
var issue = result[index].issue;
for (var i in issue) {
var item1 = $('input[value="' + issue[i] + '"]');
$(this).find(item1).attr('checked', 'checked');
}
});
label {
display: inline-block;
}
input[type=checkbox] {
height: 18px;
width: 18px;
}
<table>
<tbody>
<tr>
<th>project</th>
<td>
<div style="width: 800px" class="project2">
<label>
<input type="checkbox" name="project[]" value="crosserver">
crosserver
</label>
<label>
<input type="checkbox" name="project[]" value="dev">
dev
</label>
<label>
<input type="checkbox" name="project[]" value="ceshi">
ceshi
</label>
<label>
<input type="checkbox" name="project[]" value="klfqios">
klfqios
</label>
<label>
<input type="checkbox" name="project[]" value="banshu">
banshu
</label>
<label>
<input type="checkbox" name="project[]" value="tishen">
tishen
</label>
<label>
<input type="checkbox" name="project[]" value="del">
del
</label>
<label>
<input type="checkbox" name="project[]" value="dyb">
dyb
</label>
<label>
<input type="checkbox" name="project[]" value="kuaiwan">
kuaiwan
</label>
<label>
<input type="checkbox" name="project[]" value="ddleios">
ddleios
</label>
<label>
<input type="checkbox" name="project[]" value="ybguios">
ybguios
</label>
<label>
<input type="checkbox" name="project[]" value="lgybios">
lgybios
</label>
<label>
<input type="checkbox" name="project[]" value="leboios">
leboios
</label>
<label>
<input type="checkbox" name="project[]" value="qpcios">
qpcios
</label>
<input type="checkbox" name="project[]" value="all" checked="">
</div>
</td>
</tr>
<tr>
<th>issue</th>
<td>
<div style="width: 800px" class="issue2">
<label>
<input type="checkbox" name="issue[]" value="cjsgios_lg">
cjsgios_lg
</label>
<label>
<input type="checkbox" name="issue[]" value="dev">
dev
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_msg">
dyb_msg
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_msgios">
dyb_msgios
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_testin_android">
dyb_testin_android
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_wjlgz_android">
dyb_wjlgz_android
</label>
<label>
<input type="checkbox" name="issue[]" value="huixie_banshu">
huixie_banshu
</label>
<label>
<input type="checkbox" name="issue[]" value="kdmsios_jq">
kdmsios_jq
</label>
<label>
<input type="checkbox" name="issue[]" value="kw_msg">
kw_msg
</label>
<label>
<input type="checkbox" name="issue[]" value="unkonwn">
unkonwn
</label>
<label>
<input type="checkbox" name="issue[]" value="wjlgzios_lg">
wjlgzios_lg
</label>
<label>
<input type="checkbox" name="issue[]" value="zgtxios_ll">
zgtxios_ll
</label>
<label>
<input type="checkbox" name="issue[]" value="zqsgios_Runhero">
zqsgios_Runhero
</label>
<label>
<input type="checkbox" name="issue[]" value="{4ff036a1-3254eafe}">
{4ff036a1-3254eafe}
</label>
<input type="checkbox" name="issue[]" value="all" checked="">
</div>
</td>
</tr>
</tbody>
</table>

How to make checkbox checked on field update

I am making a form with 10 fields with 10 checkboxes. On updating the field i want relevant checkbox to be checked. I can make it work by writing 10 different ON change function but i am looking for a smart way to achieve it instead of writing 10 different ON change functions for respective fields.
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
$('#field-1').bind('change', () => {
$('#checkbox-1').prop('checked', true);
});
$('#field-2').bind('change', () => {
$('#checkbox-2').prop('checked', true);
});
$('#field-3').bind('change', () => {
$('#checkbox-3').prop('checked', true);
});
I would advise you to use starts-with selector to find all your fields and bind input handlers. Then when you are able to handle it, you have to find appropriate checkbox and check it:
$('input[name^="field-"]').on('input', function(){
let fieldId = $(this).attr('name').slice(-1);
$('#checkbox-'+fieldId).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
Wrap your iinput field and checkbox in a div and then add the logic of checking your checkbox to those wrappers.
$('.checked-input').find('input[type=text]').on('change', function(){
$(this).closest('.checked-input').find('input[type=checkbox]').prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checked-input">
<input type="text" value="" id="field-1" name="field-1">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
</div>
<div class="checked-input">
<input type="text" value="" id="field-2" name="field-2">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
</div>
You could group all input which contain field in their id and use the number id to check corresponding checkbox:
$('input[id*=field]').on('change', function() {
$('#checkbox-' + $(this).prop("id").split('-')[1]).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" />
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" />
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" />
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
As an alternative you could tell the input which checkbox to target using a data poperty. I also put an alternate to only check if not empty OR an alternate to find the prior sibling of each.
$('input[type=text]').on('change', function(event) {
let checkpair = $(this).data('targetpair');
$(checkpair).prop('checked', true);
// alternate only if not empty:
//$(checkpair).prop('checked', $(this).val().trim().length);
});
/* alternate that finds the immediate checkbox sibling
$('input[type=text]').on('change', function(event) {
$(this).prevAll('input[type=checkbox]').first().prop('checked', true);
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" />
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" data-targetpair="#checkbox-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" />
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" data-targetpair="#checkbox-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" />
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" data-targetpair="#checkbox-3" name="field-3">
<label class="form-label">Field 3</label>

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.

jQuery multi-step form: disable next button when fields unchecked

I have a multi-step form that has a "next" and "back" button on each step of the form. I'm using jQuery to enable the "next" button once the criteria for each section is met. For example: at least one checkbox is checked or a radio button is selected.
I'm having an issue where after completing a number of sections, I go back to a previous section and uncheck all checkboxes and the "next" button remains enabled.
There's a Codepen here of a rough version of what I'm working with - note all sections are visible to show how the button remains enabled once you begin checking/unchecking: https://codepen.io/abbasarezoo/pen/jZgQOV
My current code:
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>
JS:
var $panelsInput = $('.panels input'),
$rowsInput = $('.rows input');
$panelsInput.click(function () {
if ($('.panels input:checked').length >= 1) {
$(this).closest('.panels').find('.next-q').prop('disabled', false);
}
else {
$(this).closest('.panels').find('.next-q').prop('disabled', true);
}
});
$rowsInput.click(function () {
var radioLength = $('.radio-row').length;
if ($('.rows input:checked').length == radioLength) {
$('.rows .next-q').prop('disabled', false);
}
else {
$('.rows .next-q').prop('disabled', true);
}
});
Is there any way to make this work?
when you select the input to see if is checked, you're selecting all inputs
if ($('.panels input:checked').length >= 1) {
you need to select just the inputs from the panel the user clicked
if ($(this).closest('.panels').find('input:checked').length >= 1) {
https://codepen.io/spacedog4/pen/YaWqdo?editors=1010
Please see below comment in $panelsInput.click(function (){});, you need to get the checked count for current panel (the user clicks), instead of all.
So the comparasion in your codes:
$('.panels input:checked').length >= 1
need to change to:
$(this).parent().find('input:checked').length >= 1
var $panelsInput = $('.panels input'),
$rowsInput = $('.rows input');
$panelsInput.click(function () {
//get current input, find out its parent, then get the count of checked
if ($(this).parent().find('input:checked').length >= 1) {
$(this).closest('.panels').find('.next-q').prop('disabled', false);
}
else {
$(this).closest('.panels').find('.next-q').prop('disabled', true);
}
});
$rowsInput.click(function () {
var radioLength = $('.radio-row').length;
if ($('.rows input:checked').length == radioLength) {
$('.rows .next-q').prop('disabled', false);
}
else {
$('.rows .next-q').prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>
I thought it is interesting to handle interactions using event delegation at the form level which is more flexible:
Only one handler is loaded in memory. (By the way only a single scope is in charge of the logic behind the prev/next behavior).
You can add dynamically panels to the form (with the same markup structure) and buttons will work right away without requiring another listener registering step.
var $panelsInput = $('.panels input')
, $rowsInput = $('.rows input')
;
$('form').on('click', function (e) {
let $t = $(this)
, $target = $(e.target)
, $fieldset = $target.closest('fieldset')
, $rows = $fieldset.find('.radio-row')
;
// When a button is clicked
if ($target.is('button')) {
// Next button
if ($target.is('.next-q')) {
$fieldset.addClass('hide').next().addClass('show');
// Prev button
} else {
// Untick boxes
$fieldset.find('input').prop('checked', false).end()
// Disable appropriate button
.find('.next-q').prop('disabled', true).end()
.prev().removeClass('hide').nextAll().removeClass('show');
}
// When a checkbox is clicked
} else if ($target.is('input')) {
let $containers = ($rows.length ? $rows : $fieldset)
, containersHavingAtickedBox = $containers.filter(function() {
return !!$(this).find('input:checked').length
})
, shouldEnable = $containers.length === containersHavingAtickedBox.length
;
$fieldset.find('.next-q').prop('disabled', !shouldEnable);
}
});
fieldset ~ fieldset, .hide{display:none}
fieldset.show:not(.hide){display: block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>

Check the checkboxes between divs

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

Categories