Show HTML elements based on array value - javascript

I have a series of checkboxes that can accept multiple "checks." What I want to have is have a div shown for every checkbox checked.
I have it set up to capture the value of every checkbox and store it in an array. But now I'm trying to figure out how to display each element for every case, e.g., If A is selected, show A; if A and B are selected, show A & B, etc.
I started doing this as a series of if...then statements, but I feel like that will quickly become unwieldily. Then I thought about using "switch" but couldn't get that to work. Anyone have any thoughts?
function GetSelected() {
var selected = new Array();
var tblFruits = document.getElementById("tblFruits");
var chks = tblFruits.getElementsByTagName("INPUT");
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
selected.push(chks[i].value);
}
}
if (selected.includes("1")) {
document.getElementById("mango").style.display = "block";
}
else if (selected.includes("1") && selected.includes("2")) {
document.getElementById("mango").style.display = "block" ;
document.getElementById("apple").style.display = "block" ;
}
else {
console.log("Oops");
}
console.log(selected.includes("2"));
}
#mango, #apple, #banana, #guava, #orange {
display: none;
}
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>

You are over complicating this. There is a one to one relationship between the checkboxes and the content elements.
Just loop over the checkboxes and parse their id to get the associated content id and within that loop update the display of the associated content element every iteration.
Or do the reverse , loop over the content elements and see if the associated checkbox is checked.
You could make it even simpler by setting the values as the content id and skip a line of parsing the checkbox id. Then the content id would be el.value
function GetSelected() {
document.querySelectorAll('#tblFruits input').forEach((el) => {
const contentId = el.id.replace('chk', '').toLowerCase()
document.getElementById(contentId).style.display = el.checked ? 'block' : 'none';
});
}
#mango,
#apple,
#banana,
#guava,
#orange {
display: none;
}
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1" /><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2" /><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3" /><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4" /><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5" /><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type="button" value="Get" onclick="GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>

In your solution selected array contains entire htmlElement and not just value of the checkbox, but you are treating array as in it contains only value.
This will solve your problem 😉
function clearSelection() {
const divs = document.querySelectorAll('.wrapper > div');
[...divs].forEach(div => {
div.style.display = 'none';
});
}
function GetSelected() {
clearSelection()
var tblFruits = document.getElementById("tblFruits");
var chks = tblFruits.getElementsByTagName("INPUT");
const selected = Array.prototype.filter.call(chks, checkbox => checkbox.checked).map(data => data.id);
selected.forEach(id => {
var resultId = id.slice(3).toLowerCase();
document.getElementById(resultId).style.display = 'block';
})
}
#mango, #apple, #banana, #guava, #orange {
display: none;
}
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>

I would recommend avoiding situations in which you hard-code multiple conditions-- it scales very poorly. Instead, I would find a way to link each checkbox to an option and simply loop the results. In the below, we get the associated text label and use it to find the matched div by id to show it:
function GetSelected() {
var selected = new Array();
var tblFruits = document.getElementById("tblFruits");
var chks = tblFruits.getElementsByTagName("INPUT");
// clear all previously shown options
const divs = document.querySelectorAll('.wrapper > div');
[...divs].forEach(div => {
div.style.display = 'none';
});
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
let value = chks[i].value;
let text = chks[i].labels[0].textContent.toLowerCase();;
selected.push(value);
document.querySelector(`#${text}`).style.display = 'block';
}
}
// do anything else you need with the checkbox array
}
#mango, #apple, #banana, #guava, #orange {
display: none;
}
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>
This solution attempted to not touch/change any of the markup. It's super flimsy as is-- all you need is for the label to have a space and it falls apart. Instead, consider using data- attributes to provide more concrete links between the two pieces of markup that can be used to connect them and make changes as need in a manner that is derived.

Try like this
checkbox value and fruits div having relation. If checkbox banana is checked then div with id banana will get displyed and other div style will set to display:none.
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="mango"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="apple"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="banana"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="guava"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="orange"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>
function GetSelected() {
var selected = new Array();
var tblFruits = document.getElementById("tblFruits");
var chks = tblFruits.getElementsByTagName("INPUT");
// this for loop will check checkbox current value and will hide fruits divs
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
selected.push(chks[i].value);
document.getElementById(chks[i].value).style.display = "block";
} else {
document.getElementById(chks[i].value).style.display = "none";
}
}
console.log(selected); // All selected fruit stored in this array will diaplyed on console
}
Here is working demo https://playcode.io/657247/

Related

JQuery/Javascript Accessing a table with checkbox and retrieve the id of one specific <td>

Trying to :
Verify if a checkbox got selected.
2.Retrieve the value.
Save a value in an array.
So my array would have the following values: [1,21,111]
What him I missing, any guidance would be appreciated.
After I've figured this out... will go and create another array to store the automationName.
var SelectedItems = [];
$('.btn1').on('click', function() {
SelectedItems.length = 0;
$('#flowtable tbody tr').each(function() {
// if ($(this).is(':checked')) {
// if ($('.scheduleMe').is(':checked')) {
if ($('td .scheduleMe').is(':checked')) {
SelectedItems.push($(this).attr("id"));
}
});
console.log('Checked #' + SelectedItems.length);
console.log("list 2= " + SelectedItems);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>jQuery Crash Course</h1>
</header>
<div id="container">
<form id="form">
<table id="flowtable">
<tbody>
<tr class="selected">
<td id="1"></td>
<td class="automationName"> automation 1</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle1"></td>
</tr>
<tr>
<td id="21"></td>
<td class="automationName">automation 21</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle21"></td>
</tr>
<tr>
<td id="111"></td>
<td class="automationName">automation 111</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle111"></td>
</tr>
</tbody>
</table>
<button type="button" class="btn1">check list box</button>
</form>
</div>
Firstly, give the checkboxes a value which is the id they relate to, not the the sibling/parent td.
From there you can simplify your logic by using map() to build an array of the selected values only once, when the button is clicked, not having to maintain additions/deletions from the higher scoped array when a change is made.
Below is a working example. Note the use of label elements to make the clickable area of the checkboxes bigger.
$('.btn1').on('click', function() {
let selectedItems = $('.scheduleMe:checked').map((i, el) => el.value).get();
console.log(selectedItems);
// work with the array as required here, eg. pass to a fnuction for processing...
});
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<header>
<h1>jQuery Crash Course</h1>
</header>
<div id="container">
<form id="form">
<table id="flowtable">
<tbody>
<tr class="selected">
<td id="1"></td>
<td class="automationName"><label for="vehicle1">automation 1</label></td>
<td><input type="checkbox" value="1" class="scheduleMe" name="vehicle1" id="vehicle1" /></td>
</tr>
<tr>
<td id="21"></td>
<td class="automationName"><label for="vehicle21">automation 21</label></td>
<td><input type="checkbox" value="21" class="scheduleMe" name="vehicle21" id="vehicle21" /></td>
</tr>
<tr>
<td id="111"></td>
<td class="automationName"><label for="vehicle111">automation 111</label></td>
<td><input type="checkbox" value="111" class="scheduleMe" name="vehicle111" id="vehicle111" /></td>
</tr>
</tbody>
</table>
<button type="button" class="btn1">check list box</button>
</form>
</div>
If, for whatever reason, you can't change the HTML, then you can read the value from the td in map() like this:
let selectedItems = $('.scheduleMe:checked').map((i, el) => $(el).closest('tr').find('td[id]').prop('id')).get();
callMe() is a function that is handling all logic.
I am just checking if the checkBox is checked or not by using default property of input type checkbox checked.
If it is checked then we are pushing it in array, just making sure the item is not already there by using includes(). method.
var SelectedItems = [];
const tableRows = document.querySelectorAll("#flowtable tr");
const checkBoxes = document.querySelectorAll("#flowtable tr td > input");
const btn = document.querySelectorAll("#btn1");
function callMe() {
checkBoxes.forEach(checkBox => {
if (checkBox.checked) {
const currentParent = checkBox.parentElement.parentElement;
const getId = currentParent.querySelectorAll("td[id]")[0];
const val = getId.id;
if (SelectedItems.includes(val)) return;
SelectedItems.push(val);
}
})
if (SelectedItems === undefined || SelectedItems.length == 0) {
// array does not exist or is empty
console.log("No checkbox is checked.");
} else {
console.log(SelectedItems);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>jQuery Crash Course</h1>
</header>
<div id="container">
<form id="form">
<table id="flowtable">
<tbody>
<tr class="selected">
<td id="1"></td>
<td class="automationName"> automation 1</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle1"></td>
</tr>
<tr>
<td id="21"></td>
<td class="automationName">automation 21</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle21"></td>
</tr>
<tr>
<td id="111"></td>
<td class="automationName">automation 111</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle111"></td>
</tr>
</tbody>
</table>
<button type="button" id="btn1" onclick="callMe();">check list box</button>
</form>
</div>

How to sum ticked RadioButtons

i would like to sum the ticked "Yes/No" RadioButtons from my checklist. So, it depens wheter i click on "Yes" or "No" if it should be count to sum.
This is my code so far. Unfortunately, the sum doesn't display.
function checkTicked() {
var form = document.getElementById("selected");
let sum = 0;
for (j = 0; j < form.length; j++) {
if (form[j].checked == true) {
sum = sum + 1;
}
}
document.getElementById("summe").value = sum;
}
<form name="liste"></form>
<table>
<tbody>
<tr>
<th>Question</th>
<th>Answer</th>
</tr>
<tr>
<td>Trifft A zu?</td>
<td>
<div>
<label>
<input type="radio" name="choice0" id="selected" onchange="checkTicked()">
Ja
</label>
<label>
<input type="radio" name="choice0" onchange="checkTicked()">
Nein
</label>
</div>
</td>
</tr>
<tr>
<td>Trifft B zu?</td>
<td>
<div>
<label>
<input type="radio" name="choice1" id="selected" onchange="checkTicked()">
Ja
</label>
<label>
<input type="radio" name="choice1" onchange="checkTicked()">
Nein
</label>
</div>
</td>
</tr>
<tr>
<td colspan="2" ; style="text-align:right;"><b>Summe</b></td>
<td><input type="text" size="3" name="summe1" id="summe" value="0"></td>
</tr>
</tbody>
</table>
You had some issues
closed the form too early
missed a <table>
not unique IDs
you had an int instead of let or var in the for loop
To fix YOUR code you can do
function checkTicked() {
var radios = document.querySelectorAll("input[type=radio]:checked");
let sum = 0;
for (let i = 0; i < radios.length; i++) {
if (radios[i].closest("label").innerText.trim() === "Ja") {
sum += 1;
}
}
document.getElementById("summe").value = sum;
}
But I suggest delegation and a simpler script with more information on the radio itself:
I delegate from the form instead of adding inline event handlers
You can remove the summeNEIN from the form and the second count if you only want the JA
document.getElementById("liste").addEventListener("input", function(e) {
document.getElementById("summeJA").value = this.querySelectorAll("input[value=ja]:checked").length
document.getElementById("summeNEIN").value = this.querySelectorAll("input[value=nein]:checked").length
})
<form id="liste">
<table>
<tbody>
<tr>
<th>Question</th>
<th>Answer</th>
</tr>
<tr>
<td>Trifft A zu?</td>
<td>
<div>
<label> <input type="radio" name="choice0" value="ja">Ja</label>
<label><input type="radio" name="choice0" value="nein">Nein</label>
</div>
</td>
</tr>
<tr>
<td>Trifft B zu?</td>
<td>
<div>
<label><input type="radio" name="choice1" value="ja">Ja</label>
<label><input type="radio" name="choice1" value="nein">Nein</label>
</div>
</td>
</tr>
<tr>
<td colspan="2" ; style="text-align:right;"><b>Summe JA</b></td>
<td><input type="text" size="3" name="summeJA" id="summeJA" value="0"></td>
</tr>
<tr>
<td colspan="2" ; style="text-align:right;"><b>Summe NEIN</b></td>
<td><input type="text" size="3" name="summeNEIN" id="summeNEIN" value="0"></td>
</tr>
</tbody>
</table>
</form>

How to fetch checkbox values from table in javascript?

I have a table which has checkbox in each column and I want to get the 'name' attribute of checked checkbox. Below is the checkbox look like. Each checkbox has different name associated with row and column. Syntax of name attribute is [row_name-col_name]:
I tried like the below in a JS file:
var formid = jQuery(elem).attr('id');
var checkdvalue = [];
var j = 0;
jQuery('#ecf_table').find('tr').each(function() {
var row = jQuery(this);
if (row.find('input[type="checkbox"]').is(':checked')) {
checkdvalue[j++] = jQuery(row.find('input[type="checkbox"]')).attr('name');
}
alert(checkdvalue);
});
I need an array which looks like A.4-2,A.4-3,A.6-2 for the above table. However I am getting A.4-1,A.6-1 only. Please help me to get desired value.
You don't have to loop through the entire table, you can just select all checked checkboxes on the page. If you wish to limit it to that table, use selector #ecf_table input[type="checkbox"]:checked instead.
function calculate() {
var arr = [];
$('input[type="checkbox"]:checked').each(function () {
arr.push($(this).attr('name'));
});
console.log(arr);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="A.1">
<input type="checkbox" name="A.2">
<input type="checkbox" name="A.3">
<input type="checkbox" name="B.1">
<input type="checkbox" name="B.2">
<input type="checkbox" name="B.3">
<button onclick="calculate()">Click me</button>
The issue with your code is that your selector finds a collection of checkboxes. You then call attr() on that collection, but that method will only look at the first element found, not all of them.
To make the logic work you could instead select all the checked boxes and use map() to build the array from them. Using that method, all your code could be reduced to this:
var checkedvalue = $('#ecf_table :checkbox:checked').map(function() {
return this.name;
});
I did a small edit to your code.
This should work fine.
function TestMethod()
{
var checkdvalue = [];
var j = 0;
jQuery('#ecf_table').find('tr').each(function () {
var row = jQuery(this);
row.find('input[type="checkbox"]').each(function () {
var checkbox = jQuery(this);
if(checkbox.prop("checked") == true)
{
checkdvalue[j++] = checkbox.attr("id");
}
});
});
alert(checkdvalue);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" runat="server">
<div>
<table id="ecf_table">
<tr>
<td colspan="6">Advanced Scrum Product Owner</td>
</tr>
<tr>
<td>e-Competence Level</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>A.4</td>
<td><input type="checkbox" id="A.4-1"/></td>
<td><input type="checkbox" id="A.4-2"/></td>
<td><input type="checkbox" id="A.4-3"/></td>
<td><input type="checkbox" id="A.4-4"/></td>
<td><input type="checkbox" id="A.4-5"/></td>
</tr>
<tr>
<td>A.6</td>
<td><input type="checkbox" id="A.6-1"/></td>
<td><input type="checkbox" id="A.6-2"/></td>
<td><input type="checkbox" id="A.6-3"/></td>
<td><input type="checkbox" id="A.6-4"/></td>
<td><input type="checkbox" id="A.6-5"/></td>
</tr>
<tr>
<td>B.1</td>
<td><input type="checkbox" id="B.1-1"/></td>
<td><input type="checkbox" id="B.1-2"/></td>
<td><input type="checkbox" id="B.1-3"/></td>
<td><input type="checkbox" id="B.1-4"/></td>
<td><input type="checkbox" id="B.1-5"/></td>
</tr>
<tr>
<td>B.3</td>
<td><input type="checkbox" id="B.3-1"/></td>
<td><input type="checkbox" id="B.3-2"/></td>
<td><input type="checkbox" id="B.3-3"/></td>
<td><input type="checkbox" id="B.3-4"/></td>
<td><input type="checkbox" id="B.3-5"/></td>
</tr>
</table>
<input type="button" onclick="TestMethod()" value="submit" />
</div>
</form>

JQuery Two 'Select All' Checkboxes Across 2 Tables

I have two tables that are filled with a number of checkboxes (the number is variable based on a retrieval profile defined on a previous screen). I've implemented a Select All check box at the top of each table with the following:
$('#select_all').bind('click', function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
But this function selects all checkboxes in both tables (as it is poorly written to do). Is there an easy method of having the code select all checkboxes in each distinct tables.
Thanks.
You need to make your css more selective. It may not be necessary to use ids and an entirely different click function for each. You can probably just have a single click function bound to both and use the right selector, but hard to know without seeing your html.
If you post your html it will make it easier to help you, but you need something like the following:
$('#select_all1').bind('click', function() {
var checkedState = this.checked;
$('#table1 :checkbox').each(function() {
this.checked = checkedState;
});
});
$('#select_all2').bind('click', function() {
var checkedState = this.checked;
$('#table2 :checkbox').each(function() {
this.checked = checkedState;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select_all1"></input>
<table id="table1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
<input type="checkbox" id="select_all2"></input>
<table id="table2">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
It is advisable you use class attribute for your table since Id's are supposed to be unique.
Create a variable to store value for table closest to checkbox current checkbox triggered and Concatenate the variable with Selector.
$('.selectAll').bind('click', function() {
var thisTable = $(this).closest('.checkTable');//closest table of this checkbox triggered
var checkedState = this.checked;//variable for checkbox checked.
$(':checkbox', thisTable).each(function(){//concatenate 'thisTable' variable with css selector and iterate
this.checked = checkedState;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="checkTable">
<tr>
<th> <input type="checkbox" class="selectAll"></th>
<th>Select All</th>
</tr>
<tr>
<td><input type="checkbox" id="1"></td>
<td>Hello</td>
</tr>
<tr>
<td><input type="checkbox" id="2"></td>
<td>Hi</td>
</tr>
</table>
<table class="checkTable">
<tr>
<th><input type="checkbox" class="selectAll"></th>
<th>Select All</th>
</tr>
<tr>
<td><input type="checkbox" id="3"></td>
<td>One</td>
</tr>
<tr>
<td><input type="checkbox" id="4"></td>
<td>Two</td>
</tr>
</table>
Use different id for different table or use class for table instead of id like so:
$('.select_all').bind('click', function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});

Execute function when one of many checkboxes are checked

I have some check boxes in a table as shown below:
<table id="checkBoxTable" class="uk-margin-small-top uk-hidden checkBoxTable" style="width:100%">
<tr>
<td><label id="1"><input name="1" type="checkbox"> 12am-1am</label</td>
<td><label id="2"><input name="2" type="checkbox"> 1am-2am</label</td>
<td><label id="3"><input name="3" type="checkbox"> 2am-3am</label></td>
<td><label id="4"><input name="4" type="checkbox"> 3am-4am</labe</td>
</tr>
</table>
I want to execute a function whenever any of the checkboxes are checked. I've been trying the following:
$('#checkBoxTable').change(function(){
var price = 10 * originalPrice;
$('#price').value = price + "";
});
You are selecting #checkBoxTable which is id of the table. You should use #checkBoxTable :checkbox to select checkbox elements.
$('#checkBoxTable :checkbox:checked' will return checked input elements.
var originalPrice = 100;
$('#checkBoxTable :checkbox').change(function() {
if ($('#checkBoxTable :checkbox:checked').length) {
var price = 10 * originalPrice;
alert(price);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="checkBoxTable" class="uk-margin-small-top uk-hidden checkBoxTable" style="width:100%">
<tr>
<td>
<label id="1">
<input name="1" type="checkbox">12am-1am</label>
</td>
<td>
<label id="2">
<input name="2" type="checkbox">1am-2am</label>
</td>
<td>
<label id="3">
<input name="3" type="checkbox">2am-3am</label>
</td>
<td>
<label id="4">
<input name="4" type="checkbox">3am-4am</label>
</td>
</tr>
</table>
Fiddle demo
Target checkbox input[type="checkbox"]
$('#checkBoxTable input[type="checkbox"]').change(function(){
var price = 10 * originalPrice;
$('#price').value = price + "";
});

Categories