I have list of checkbox which are loaded dynamically. These checkboxes are around 2000 CheckBox. Once they are loaded, the web page becomevery long and the shape is not good. I want to add these check box in frame so only frame will be extended and the size of the page will be the same. Any idea how to do so.
I tried to use iframe but what I see is that it can handle only either another web page or some document.
An <iframe> or <frame> is not needed. You can use CSS to do you what you are after.
Sample below should be easy to adapt to your needs.
.div-that-scrolls {
height:120px;
overflow-y:auto;
line-height:32px;
}
<div>
List of checkboxes<br />
<div class="div-that-scrolls">
<input type="checkbox" id="i1" name="i1" /><label for="i1">Item 1</label><br />
<input type="checkbox" id="i2" name="i2" /><label for="i2">Item 2</label><br />
<input type="checkbox" id="i3" name="i3" /><label for="i3">Item 3</label><br />
<input type="checkbox" id="i4" name="i4" /><label for="i4">Item 4</label><br />
<input type="checkbox" id="i5" name="i5" /><label for="i5">Item 5</label><br />
<input type="checkbox" id="i6" name="i6" /><label for="i6">Item 6</label><br />
<input type="checkbox" id="i7" name="i7" /><label for="i7">Item 7</label><br />
<input type="checkbox" id="i8" name="i8" /><label for="i8">Item 8</label><br />
<input type="checkbox" id="i9" name="i9" /><label for="i9">Item 9</label><br />
<input type="checkbox" id="i10" name="i10" /><label for="i10">Item 10</label><br />
<input type="checkbox" id="i11" name="i11" /><label for="i11">Item 11</label><br />
<input type="checkbox" id="i12" name="i12" /><label for="i12">Item 12</label><br />
<input type="checkbox" id="i13" name="i13" /><label for="i13">Item 13</label><br />
<input type="checkbox" id="i14" name="i14" /><label for="i14">Item 14</label><br />
<input type="checkbox" id="i15" name="i15" /><label for="i15">Item 15</label><br />
<input type="checkbox" id="i16" name="i16" /><label for="i16">Item 16</label><br />
<input type="checkbox" id="i17" name="i17" /><label for="i17">Item 17</label><br />
<input type="checkbox" id="i18" name="i18" /><label for="i18">Item 18</label><br />
<input type="checkbox" id="i19" name="i19" /><label for="i19">Item 19</label><br />
<input type="checkbox" id="i20" name="i10" /><label for="i10">Item 10</label><br />
<input type="checkbox" id="i21" name="i21" /><label for="i21">Item 21</label><br />
<input type="checkbox" id="i22" name="i22" /><label for="i22">Item 22</label><br />
</div>
<p>
Something after the checkboxes
</p>
</div>
Related
I have a form with a table and when the user click the radio button No the content of the following cells in that row should be visible. And when clicking Yes, the content should be hidden again. There is no difference now. It works outside the table.
I have tried style="display:table-cell" in a div-tag and in the td-tag - no success.
Picture of the form for the user
The error message in DevTools is: TypeError: Cannot read properties of null (reading 'checked')
at yesnoCheck
Picture of error message in DevTools
function yesnoCheck(var1, var2) {
if (document.getElementById(var1).checked) {
document.getElementById(var2).style.display = 'none';
} else document.getElementById(var2).style.display = 'block';
}
th {
background-color: #dddddd
}
<h1>Hide input fields based on radio button selection</h1>
<h3>Frame</h3>
Propellers OK?<br />
<input type="radio" name="yesno" id="noCheck" onclick="javascript:yesnoCheck('noCheck', 'ifNo');">Yes
<input type="radio" name="yesno" id="noCheck" onclick="javascript:yesnoCheck('noCheck', 'ifNo');">No<br>
<div id="ifNo" style="display:none">
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
<br /> Frame arms OK?<br />
<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />Yes
<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />No
<div id="framearmsDiv" style="display:none">
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
<br /><br />
<form>
<table style="width:100%">
<tr>
<th>What to do</th>
<th>OK</th>
<th>Replaced</th>
<th>Date</th>
<th>Checked by</th>
</tr>
<tr>
<td>The propellers, motors, and aircraft body are intact, and there is no sign for collision or loose or broken structures.</td>
<td><input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" />Yes
<input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="No" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" />No
</td>
<div id="aftercheckbodyDiv" style="display:table-cell">
<td><input type="checkbox" id="aftercheckbodyC" value="Yes" /></td>
</div>
<td><input type="date" id="aftercheckbodyD" /></td>
<td><input type="text" id="aftercheckbodyT" /></td>
</tr>
<tr>
<td>The temperature of the motors is normal and there are no signs of uneven heating.</td>
<td> <input type="radio" name="afterchecktempR" value="Yes" />Yes
<input type="radio" name="afterchecktempR" value="No" />No
</td>
<td><input type="checkbox" id="afterchecktempC" value="Yes" /></td>
<td><input type="date" id="afterchecktempD" /></td>
<td><input type="text" id="afterchecktempT" /></td>
</tr>
</table>
</form>
There is not a element with id 'framearms' that's why it's null
<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />Yes
You need
Valid HTML - you have divs between the cells
Unique IDs.
Consistent use of name, tags, values etc.
No need to prefix everything with javascript:
I strongly recommend you wrap each set in a container, then you do not need inline JS you can just look at the value and use hidden=value==="Yes"
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
const hide = tgt.value === "Yes";
tgt.closest("div").querySelector("div").hidden = hide; // hide the nested div
})
th {
background-color: #dddddd
}
<div id="container">
<h1>Hide input fields based on radio button selection</h1>
<h2>Frame</h2>
<div>
<h3>Propellers OK?</h3>
<input type="radio" name="yesno" value="Yes">Yes
<input type="radio" name="yesno" value="No">No<br>
<div hidden>
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
</div>
<div>
<h3>Frame arms OK?</h3>
<input type="radio" name="framearms" value="Yes" />Yes
<input type="radio" name="framearms" value="No" />No
<div id="framearmsDiv" hidden>
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
</div>
...
</div>
Two issues found in your code
1. <input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" >
Quotes are missing for input field as it should be string - id of control
- <input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck('aftercheckbodyR', 'aftercheckbodyDiv');"
2. In correct HTML - include 'aftercheckbodyDiv' <div> tag inside <td>
<td>
<div id="aftercheckbodyDiv" style="display:table-cell">
<input type="checkbox" id="aftercheckbodyC" value="Yes" />
</div>
</td>
An image is being rendered based on multiple attributes.
The name of the image reflects attribute values (for names a, b, & c).
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>
when a user clicks a radio button (say b_4), the checked input element needs to change and a new image needs to render as
<img src="142_small.jpg" data-zoom-image="142_big.jpg" id="rendered_choice">
How can this be accomplished with jQuery, where the file name takes into account all other checked values in addition to the user inputted value?
Just get the value of each checked checkbox, in order, after making an array with $.makeArray:
$("input[type='radio']").on("change", function() {
const num = $.makeArray($("input:checked")).map(({ value }) => value).join("");
$("#rendered_choice").attr("src", num + "_small.jpg").data("zoom-image", num + "_big.jpg");
});
You can get value of each checked checkbox and change the img src when input checked change.
Demo:
$("input[type=radio]").on("change", function() {
var index = $("input[name=a]:checked").val() + $("input[name=b]:checked").val() + $("input[name=c]:checked").val();
$("#rendered_choice").attr("src", index + "_small.jpg");
$("#rendered_choice").attr("data-zoom-image", index + "_big.jpg");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>
On submitting a button I want to get the values of multiple checkboxes where each checkbox have radio buttons. I expect the output will be like if I check
checkbox One and select its corresponding radio button L, checkbox Two and select its corresponding radio button M, checkbox Three and select its corresponding radio button C and it is not mandatory to check all the checkboxes, one may leave some checkbox empty. I want to get the selected item and its corresponding values only.
var allCheckedItem = [];
$.each(jQuery("input[name='teeth']:checked"),
function(){ allCheckedItem.push($(this).val());
});
for (var i = 0; i < allCheckedItem.length; i++)
{
var eachItem = allCheckedItem[i];
console.log(eachItem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<ul>
<li>
<input name='teeth' type="checkbox" id="cb1" value="One" />One
<span class="teethproblem1">
<input name='a' type="radio" id="rb1" value="M" />M
<input name='a' type="radio" id="rb2" value="L" />L
<input name='a' type="radio" id="rb3" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb2" value="Two"/>Two
<span class="teethproblem2">
<input name='b' type="radio" id="rb4" value="M" />M
<input name='b' type="radio" id="rb5" value="L" />L
<input name='b' type="radio" id="rb6" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb3" value="Three"/>Three
<span class="teethproblem3">
<input name='c' type="radio" id="rb7" value="M" />M
<input name='c' type="radio" id="rb8" value="L" />L
<input name='c' type="radio" id="rb9" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb4" value="Four"/>Four
<span class="teethproblem4">
<input name='d' type="radio" id="rb10" value="M" />M
<input name='d' type="radio" id="rb11" value="L" />L
<input name='d' type="radio" id="rb12" value="C" />C
</span>
</li>
<li><input type="submit" name="submit" value="SAVE"></li>
</ul>
</form>
I expect the output should be: One -> M , Two -> C , Three -> L
Here is another variation on the theme:
const getvals=()=>{var coll={};
$(':radio:checked')
.each((i,rb)=>
$(rb).closest('li')
.find(':checkbox:checked')
.each((j,cb)=>coll[cb.value]=rb.value)
)
console.log(coll);
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<ul>
<li>
<input name='teeth' type="checkbox" id="cb1" value="One" />One
<span class="teethproblem1">
<input name='a' type="radio" id="rb1" value="M" />M
<input name='a' type="radio" id="rb2" value="L" />L
<input name='a' type="radio" id="rb3" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb2" value="Two"/>Two
<span class="teethproblem2">
<input name='b' type="radio" id="rb4" value="M" />M
<input name='b' type="radio" id="rb5" value="L" />L
<input name='b' type="radio" id="rb6" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb3" value="Three"/>Three
<span class="teethproblem3">
<input name='c' type="radio" id="rb7" value="M" />M
<input name='c' type="radio" id="rb8" value="L" />L
<input name='c' type="radio" id="rb9" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb4" value="Four"/>Four
<span class="teethproblem4">
<input name='d' type="radio" id="rb10" value="M" />M
<input name='d' type="radio" id="rb11" value="L" />L
<input name='d' type="radio" id="rb12" value="C" />C
</span>
</li>
<li><input type="button" onclick="getvals()" value="SAVE"></li>
</ul>
</form>
Highly Recommended Reading: Decoupling Your HTML, CSS, and JavaScript.
One of the biggest problems you'll run into, is example code that only works with the current html. If you decide to change that html in just about any way, your code stops working (aka software brittleness). The following code extensible (meaning adding more checkboxes/radios will be easy to add, probably requiring no code changes), and should be easy to understand. Removing li or adding more html won't cause this code to stop working because it doesn't rely on html structure.
$(document).ready(function() {
$('.js-save').on('click', function(e) {
var $btn = $(e.currentTarget);
var $form = $btn.closest('form');
var $pre = $('.debug');
$pre.text('');
$form.find('input:not(".ignore-value")').each(function(_,input) {
var $input = $(input);
var value = $input.val();
if ($input.is('[type=checkbox]')) {
value = $input.prop('checked');
}
var name = $input.prop('name');
$pre.append('name: ' + name + ':' + value + '\n');
if ($input.hasClass('js-associate-value') && value) {
var associatedValue = $($input.data('target')).val();
if (associatedValue) {
$pre.append(' - ' + associatedValue + '\n');
}
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<ul>
<li>
<input name='teeth' type="checkbox" id="cb1" value="One" class="js-associate-value" data-target="input[name=d]:checked"/>One
<span class="teethproblem1">
<input name='a' type="radio" id="rb1" value="M" class="ignore-value"/>M
<input name='a' type="radio" id="rb2" value="L" class="ignore-value"/>L
<input name='a' type="radio" id="rb3" value="C" class="ignore-value"/>C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb2" value="Two" class="js-associate-value" data-target="input[name=d]:checked"/>Two
<span class="teethproblem2">
<input name='b' type="radio" id="rb4" value="M" class="ignore-value"/>M
<input name='b' type="radio" id="rb5" value="L" class="ignore-value"/>L
<input name='b' type="radio" id="rb6" value="C" class="ignore-value"/>C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb3" value="Three" class="js-associate-value" data-target="input[name=c]:checked"/>Three
<span class="teethproblem3">
<input name='c' type="radio" id="rb7" value="M" class="ignore-value"/>M
<input name='c' type="radio" id="rb8" value="L" class="ignore-value"/>L
<input name='c' type="radio" id="rb9" value="C" class="ignore-value"/>C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb4" value="Four" class="js-associate-value" data-target="input[name=d]:checked"/>Four
<span class="teethproblem4">
<input name='d' type="radio" id="rb10" value="M" class="ignore-value" />M
<input name='d' type="radio" id="rb11" value="L" class="ignore-value" />L
<input name='d' type="radio" id="rb12" value="C" class="ignore-value" />C
</span>
</li>
<li><input class="js-save" type="button" name="submit" value="SAVE"></li>
</ul>
</form>
<pre class='debug'></pre>
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
I have a list of checkboxes and I want to be able to check all of them when I click on the "All campuses" box. Alternatively, I want to the "All campuses" checkbox to uncheck when one of the campuses from the list gets unchecked and stay unchecked unless I manually check the campuses I previously unchecked. To be a bit clearer, here are the scenarious i'm looking for the program to handle:
User clicks on "All campuses" and all checkboxes are checked
User clicks on every single individual checkboxes for each campus and the "All campuses" checkbox automatically gets checked.
User unchecks the "All campuses" checkbox and everything gets unchecked.
User clicks on the "All campuses" checkbox and then all checkboxes get checked. Afterward, the user unchecks one of the campuses from the list and the "All campuses" checkbox is unchecked, but the rest of the campuses stay the same.
I added a jsFiddle with what I currently have. It currently handles scenario 1, 3 and 4 but I'm having trouble with it handling 2. Any ideas?
<input name="statewideCampus" type="checkbox" value="New" class="radio allCampuses" />All Campuses
<br />
<br />
<table style="width: 100%" class="campuses">
<tr>
<td>
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Apache Junction
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Aravaipa
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Bullhead City
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Chandler-Gilbert
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Chinle
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Communiversity # Surprise
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />East Valley
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Fort Defiance
<br />
</td>
<td>
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Ganado
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />GateWay
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Glendale
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Kayenta
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Keams Canyon
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Lake Havasu City
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Mesa
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />North Valley
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Paige
<br />
</td>
<td>
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Paradise Valley
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Phoenix
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Phoenix Biomedical
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Prescott
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Scottsdale
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Show Low
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Signal Peak
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />South Mountain
<br />
</td>
<td>
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Thatcher
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Tuba City
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Tucson
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Tucson North
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Verde Valley
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />West Valley
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Whiteriver
<br />
<input name="statewideCampus" type="checkbox" value="New" class="radio" />Yavapai
<br />
</td>
</tr>
</table>
Here is the jQuery:
$('.allCampuses').attr('checked', true);
$('.campuses input').attr('checked', true);
$('.allCampuses').click(function () {
if ($(this).is(':checked')) {
$('.campuses input').attr('checked', true);
} else {
$('.campuses input').attr('checked', false);
}
});
$('.campuses input').click(function () {
if ($(this).is(':checked')) {
$('.allCampuses').attr('checked', true);
} else {
$('.allCampuses').attr('checked', false);
}
});
http://jsfiddle.net/E9KnM/
Thanks!
I would compare the length of the lists of checked and list of inputs. Also, you need to use prop instead of attr when you are changing it:
$('.allCampuses, .campuses input').attr('checked', true);
$('.allCampuses').on('change', function () {
$('.campuses input').prop('checked', $(this).is(':checked'));
});
$('.campuses input').on('change', function() {
$('.allCampuses').prop('checked', $('.campuses input').length == $('.campuses input:checked').length);
});
Fiddle: http://jsfiddle.net/E9KnM/2/
$('.campuses input').click(function () {
if ($(this).is(':checked')) {
$('.allCampuses').attr('checked', true);
var totalCheckes = $( ".campuses input" ).length;
var totalCheckedCheckBox = $( ".campuses input:checked").length;
if(totalCheckes == totalCheckedCheckBox){
$('.allCampuses').prop('checked', true);
}
} else {
$('.allCampuses').attr('checked', false);
}
});