select and deselect check box on basis of dynamic value. - javascript

I have list if classes and sections in input type check box.
All the values classes and ids are coming dynamically. how call i select and deselect all the check box like
If i select "Class One" all its sections get selected
<table class="table table-striped table-bordered table-hover dataTable no-footer">
<thead>
<tr>
<th class="col-lg-2">#</th>
<th class="col-lg-2">Classes</th>
<th class="col-lg-2">Sections</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="#">
1 </td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="One" type="checkbox" value="">One </label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="One" type="checkbox" name="secid[]" value="1">A</label>
<label class="checkbox-inline"><input class="One" type="checkbox" name="secid[]" value="2">B</label>
</td>
</tr>
<tr>
<td data-title="#">
2
</td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="Two" type="checkbox" value="">Two
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="5">A</label>
<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="6">B</label>
<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="7">C</label>
</td>
</tr>
<tr>
<td data-title="#">
3
</td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="Three" type="checkbox" value="">Three
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Three" type="checkbox" name="secid[]" value="8">A</label>
</td>
</tr>
<tr>
<td data-title="#">
4
</td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="Four" type="checkbox" value="">Four
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Four" type="checkbox" name="secid[]" value="9">A</label>
</td>
</tr>
<tr>
<td data-title="#">
5
</td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="Five" type="checkbox" value="">Five
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Five" type="checkbox" name="secid[]" value="10">A</label>
<label class="checkbox-inline"><input class="Five" type="checkbox" name="secid[]" value="11">B</label>
</td>
</tr>
</tbody>
</table>

Try like this: See Demo Here
HTML code:
<table class="table table-striped table-bordered table-hover dataTable no-footer">
<thead>
<tr>
<th class="col-lg-2">#</th>
<th class="col-lg-2">Classes</th>
<th class="col-lg-2">Sections</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="#">
1
</td>
<td data-title="">
<label class="checkbox-inline"><input class="cls" id="One" type="checkbox" value="">One </label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="One" type="checkbox" name="secid[]" value="1">A</label>
<label class="checkbox-inline"><input class="One" type="checkbox" name="secid[]" value="2">B</label>
</td>
</tr>
<tr>
<td data-title="#">
2
</td>
<td data-title="">
<label class="checkbox-inline"><input class="cls" id="Two" type="checkbox" value="">Two
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="5">A</label>
<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="6">B</label>
<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="7">C</label>
</td>
</tr>
<tr>
<td data-title="#">
3
</td>
<td data-title="">
<label class="checkbox-inline"><input class="cls" id="Three" type="checkbox" value="">Three
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Three" type="checkbox" name="secid[]" value="8">A</label>
</td>
</tr>
<tr>
<td data-title="#">
4
</td>
<td data-title="">
<label class="checkbox-inline"><input class="cls" id="Four" type="checkbox" value="">Four
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Four" type="checkbox" name="secid[]" value="9">A</label>
</td>
</tr>
<tr>
<td data-title="#">
5
</td>
<td data-title="">
<label class="checkbox-inline"><input class="cls" id="Five" type="checkbox" value="">Five
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Five" type="checkbox" name="secid[]" value="10">A</label>
<label class="checkbox-inline"><input class="Five" type="checkbox" name="secid[]" value="11">B</label>
</td>
</tr>
</tbody>
</table>
JS code:
$(document).on('click', '.cls', function() {
if($(this).parents('td').next("td").find('input').is(':checked')) {
$(this).parents('td').next("td").find('input').prop('checked', false);
} else {
$(this).parents('td').next("td").find('input').prop('checked', true);
}
});

Related

How to Click Checkbox if row contains certain tag

I want to click the checkbox if the row contains a <mark> element. How can I do this in JS/jQuery?
<table class="views-table cols-4 table table-hover table-striped">
<thead>
<tr>
<th class="views-field views-field-views-bulk-operations">
<div class="form-item form-type-checkbox checkbox">
<label class="control-label">
<input class="vbo-table-select-all form-checkbox" type="checkbox" value="1" style="display: inline-block;">
</label>
</div>
</th>
<th class="views-field views-field-counter"> View result counter </th>
<th class="views-field views-field-title"> Title </th>
<th class="views-field views-field-php"> Correct </th>
</tr>
</thead>
<tbody>
<tr>
<td class="views-field views-field-views-bulk-operations">
<div class="form-item form-item-views-bulk-operations-0 form-type-checkbox checkbox">
<label class="control-label" for="edit-views-bulk-operations-0">
<input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-0" name="views_bulk_operations[0]" value="444">
</label>
</div>
</td>
<td class="views-field views-field-counter"> 434 </td>
<td class="views-field views-field-title"> Which chamber of heart receives oxygenated blood from lungs? </td>
<td class="views-field views-field-php"> left atrium </td>
</tr>
<tr>
<td class="views-field views-field-views-bulk-operations">
<div class="form-item form-item-views-bulk-operations-1 form-type-checkbox checkbox">
<label class="control-label" for="edit-views-bulk-operations-1">
<input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-1" name="views_bulk_operations[1]" value="443">
</label>
</div>
</td>
<td class="views-field views-field-counter"> 433 </td>
<td class="views-field views-field-title">
<mark>Transport of food in higher plants takes place through:</mark>
</td>
<td class="views-field views-field-php"> Sieve elements </td>
</tr>
<tr>
<td class="views-field views-field-views-bulk-operations">
<div class="form-item form-item-views-bulk-operations-2 form-type-checkbox checkbox">
<label class="control-label" for="edit-views-bulk-operations-2">
<input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-2" name="views_bulk_operations[2]" value="442">
</label>
</div>
</td>
<td class="views-field views-field-counter"> 432 </td>
<td class="views-field views-field-title"> What happens when food reaches the stomach? </td>
<td class="views-field views-field-php"> Juices mix with food and stomach muscles squeeze it. </td>
</tr>
<tr>
<td class="views-field views-field-views-bulk-operations">
<div class="form-item form-item-views-bulk-operations-3 form-type-checkbox checkbox">
<label class="control-label" for="edit-views-bulk-operations-3">
<input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-3" name="views_bulk_operations[3]" value="441">
</label>
</div>
</td>
<td class="views-field views-field-counter"> 431 </td>
<td class="views-field views-field-title">
<mark>Oxygen which is released during the process of photosynthesis come from?</mark>? </td>
<td class="views-field views-field-php"> water </td>
</tr>
<tr>
<td class="views-field views-field-views-bulk-operations">
<div class="form-item form-item-views-bulk-operations-4 form-type-checkbox checkbox">
<label class="control-label" for="edit-views-bulk-operations-4">
<input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-4" name="views_bulk_operations[4]" value="440">
</label>
</div>
</td>
<td class="views-field views-field-counter"> 430 </td>
<td class="views-field views-field-title">
<mark>The prerequisites of Calvin cycle are:</mark>
</td>
<td class="views-field views-field-php"> CO<sub>2</sub> + ATP + NADPH </td>
</tr>
</tbody>
</table>
To do what you require you can use the :has() selector to find the tr elements which contain a mark, and then find() the checkbox within them.
Also note that you don't need to 'click' the checkbox to set its state, you can update the checked property directly, like this:
$('tr:has(mark)').find(':checkbox').prop('checked', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="views-table cols-4 table table-hover table-striped">
<thead>
<tr>
<th class="views-field views-field-views-bulk-operations">
<div class="form-item form-type-checkbox checkbox">
<label class="control-label">
<input class="vbo-table-select-all form-checkbox" type="checkbox" value="1" style="display: inline-block;">
</label>
</div>
</th>
<th class="views-field views-field-counter"> View result counter </th>
<th class="views-field views-field-title"> Title </th>
<th class="views-field views-field-php"> Correct </th>
</tr>
</thead>
<tbody>
<tr>
<td class="views-field views-field-views-bulk-operations">
<div class="form-item form-item-views-bulk-operations-0 form-type-checkbox checkbox">
<label class="control-label" for="edit-views-bulk-operations-0">
<input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-0" name="views_bulk_operations[0]" value="444">
</label>
</div>
</td>
<td class="views-field views-field-counter"> 434 </td>
<td class="views-field views-field-title"> Which chamber of heart receives oxygenated blood from lungs? </td>
<td class="views-field views-field-php"> left atrium </td>
</tr>
<tr>
<td class="views-field views-field-views-bulk-operations">
<div class="form-item form-item-views-bulk-operations-1 form-type-checkbox checkbox">
<label class="control-label" for="edit-views-bulk-operations-1">
<input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-1" name="views_bulk_operations[1]" value="443">
</label>
</div>
</td>
<td class="views-field views-field-counter"> 433 </td>
<td class="views-field views-field-title">
<mark>Transport of food in higher plants takes place through:</mark>
</td>
<td class="views-field views-field-php"> Sieve elements </td>
</tr>
<tr>
<td class="views-field views-field-views-bulk-operations">
<div class="form-item form-item-views-bulk-operations-2 form-type-checkbox checkbox">
<label class="control-label" for="edit-views-bulk-operations-2">
<input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-2" name="views_bulk_operations[2]" value="442">
</label>
</div>
</td>
<td class="views-field views-field-counter"> 432 </td>
<td class="views-field views-field-title"> What happens when food reaches the stomach? </td>
<td class="views-field views-field-php"> Juices mix with food and stomach muscles squeeze it. </td>
</tr>
<tr>
<td class="views-field views-field-views-bulk-operations">
<div class="form-item form-item-views-bulk-operations-3 form-type-checkbox checkbox">
<label class="control-label" for="edit-views-bulk-operations-3">
<input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-3" name="views_bulk_operations[3]" value="441">
</label>
</div>
</td>
<td class="views-field views-field-counter"> 431 </td>
<td class="views-field views-field-title">
<mark>Oxygen which is released during the process of photosynthesis come from?</mark>? </td>
<td class="views-field views-field-php"> water </td>
</tr>
<tr>
<td class="views-field views-field-views-bulk-operations">
<div class="form-item form-item-views-bulk-operations-4 form-type-checkbox checkbox">
<label class="control-label" for="edit-views-bulk-operations-4">
<input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-4" name="views_bulk_operations[4]" value="440">
</label>
</div>
</td>
<td class="views-field views-field-counter"> 430 </td>
<td class="views-field views-field-title">
<mark>The prerequisites of Calvin cycle are:</mark>
</td>
<td class="views-field views-field-php"> CO<sub>2</sub> + ATP + NADPH </td>
</tr>
</tbody>
</table>

jQuery filter element in table

I would like to know how to show the students who doesn't have a class and hide the rest(where td Class-name is empty) using only jquery or js.
I look in documentation but I got lost. so if you can help plz.
Ex: my table in this picture
my table is generated by django but there is the html
<div class="button-select" id="add-student">Show Student with no Class</div>
<table class="table" id="student_table">
<tbody>
<tr class="clickable_student" style="">
<td>Student
<label for="id_students_34">
<input type="checkbox" name="students" value="34" class="displaynone">
</label>
</td>
<td class="Class-name">
Class23
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student2
<label for="id_students_38">
<input type="checkbox" name="students" value="38" class="displaynone">
</label>
</td>
<td class="Class-name">
Class17
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student3
<label for="id_students_39">
<input type="checkbox" name="students" value="39" class="displaynone">
</label>
</td>
<td class="Class-name">
Class19
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student4
<label for="id_students_40">
<input type="checkbox" name="students" value="40" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student5
<label for="id_students_41">
<input type="checkbox" name="students" value="41" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student6
<label for="id_students_42">
<input type="checkbox" name="students" value="42" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student7
<label for="id_students_43">
<input type="checkbox" name="students" value="43" class="displaynone">
</label>
</td>
<td class="Class-name">
Class18
</td>
</tr>
</tbody>
</table>
thanks in advance.
you have to loop on tr then get td inside it and then hide tr of that td which is null using jquery.
here is the jquery code for checking each tr loop through
$("tr").each(function() {
var nonEmpty = $(this).find("td.Class-name").filter(function() {
return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
});
and this code is used to hide empty td which don't have class.
if (nonEmpty.length != 0) $(this).hide();
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr").each(function() {
var nonEmpty = $(this).find("td.Class-name").filter(function() {
return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
});
if (nonEmpty.length != 0) $(this).hide();
});
});
</script>
</head>
<body>
<div class="button-select" id="add-student">Show Student with no Class</div>
<table class="table" id="student_table">
<tbody>
<tr class="clickable_student" style="">
<td>Student
<label for="id_students_34">
<input type="checkbox" name="students" value="34" class="displaynone">
</label>
</td>
<td class="Class-name">
Class23
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student2
<label for="id_students_38">
<input type="checkbox" name="students" value="38" class="displaynone">
</label>
</td>
<td class="Class-name">
Class17
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student3
<label for="id_students_39">
<input type="checkbox" name="students" value="39" class="displaynone">
</label>
</td>
<td class="Class-name">
Class19
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student4
<label for="id_students_40">
<input type="checkbox" name="students" value="40" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student5
<label for="id_students_41">
<input type="checkbox" name="students" value="41" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student6
<label for="id_students_42">
<input type="checkbox" name="students" value="42" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student7
<label for="id_students_43">
<input type="checkbox" name="students" value="43" class="displaynone">
</label>
</td>
<td class="Class-name">
Class18
</td>
</tr>
</tbody>
</table>
</body>
</html>

Multiple choice grid HTML in form submission

I made my own multiple choice grid:
<div style="overflow-x:auto;">
<table class="w-100">
<tr>
<td class="border"></td>
<td class="border">Yes</td>
<td class="border">No</td>
</tr>
<tr>
<td class="border">Is red your favorite color?</td>
<td class="border">
<div class="custom-control custom-radio"><input type="radio" id="option1" name="row1" value="???" class="custom-control-input">
<label class="custom-control-label" for="option1"></label></div>
</td>
<td class="border">
<div class="custom-control custom-radio"><input type="radio" id="option2" name="row1" value="???" class="custom-control-input">
<label class="custom-control-label" for="option2"></label></div>
</td>
</tr>
</table>
</div>
This is in a form and I am running into an issue where I dont know what to set the value so that I can determine which option was pressed and in which row. I am using Django as my backend. Does this make sense. Thanks!!
You can do it like this: Set the values of the radio inputs to yes and no, get the value using val() and the row number via the name of the radio input.
$(".custom-control-input").on("change", function() {
let val = $(this).val();
let row = $(this).attr("name");
console.log("value for " + row + ": " + val);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="overflow-x:auto;">
<table class="w-100">
<tr>
<td class="border"></td>
<td class="border">Yes</td>
<td class="border">No</td>
</tr>
<tr>
<td class="border">Is red your favorite color?</td>
<td class="border">
<div class="custom-control custom-radio"><input type="radio" id="option1" name="row1" value="yes" class="custom-control-input">
<label class="custom-control-label" for="option1"></label></div>
</td>
<td class="border">
<div class="custom-control custom-radio"><input type="radio" id="option2" name="row1" value="no" class="custom-control-input">
<label class="custom-control-label" for="option2"></label></div>
</td>
</tr>
</table>
</div>

document.querySelectorAll select id of specific input

I have a table which has two separate checkbox inputs. When selecting the first input there is a cumulative amount which calculates. If you select the second checkbox, the function errors (because of the duplicate input).
Function
function updateTotals() {
var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check:checked"),(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
$('#checkedTotal').val(sum);
};
What I need to do is separate the inputs, maybe using a class. I cant seem to get the syntax, or may be barking up the wrong tree. Something like...
function updateTotals() {
var sum = Array.prototype.reduce.call(document.querySelectorAll ('.input').check:checked,(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
$('#checkedTotal').val(sum);
};
I would add this as an jsfiddle example, but the table is in a Salesforce Visualforce Page, using apex fields.
Thanks in advance
UPDATE
Added HTML
<div style="width:50%;">
<form id="j_id0:j_id2" name="j_id0:j_id2" method="post">
<input type="hidden" name="j_id0:j_id2" value="j_id0:j_id2">
<input disabled="disabled" id="checkedTotal" name="amount" placeholder="Selected Amount" step=".02" type="number">
<table id="invoicesTable" style="width:100%;">
<thead class="tableHeadBlue">
<tr>
<td>Select</td>
<td>Date</td>
<td>Type</td>
<td>Order</td>
<td>Amount</td>
<td>id</td>
<td>Select2</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:0:inputId" type="checkbox" name="j_id0:j_id2:j_id4:0:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="458.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id7">19/04/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:0:j_id14">00006648</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id16">$458.00</span></td>
<td><span id="j_id0:j_id2:j_id4:0:j_id18">8015D000000CsiH</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:0:j_id20" class="check" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:1:inputId" type="checkbox" name="j_id0:j_id2:j_id4:1:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="200.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id7">21/06/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:1:j_id14">00006849</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id16">$200.00</span></td>
<td><span id="j_id0:j_id2:j_id4:1:j_id18">8015D000000DEuB</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:1:j_id20" class="check" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:2:inputId" type="checkbox" name="j_id0:j_id2:j_id4:2:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="500.00">
</label>
</td>
<td>
<span style="color:red;"><span id="j_id0:j_id2:j_id4:2:j_id9">22/06/2018</span>
</span>
</td>
<td><span style="color:red;">Credit</span>
</td>
<td>
<span style="color:red"><span id="j_id0:j_id2:j_id4:2:j_id14">00006852</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:2:j_id16">$500.00</span></td>
<td><span id="j_id0:j_id2:j_id4:2:j_id18">8015D000000DHKW</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:2:j_id20" class="check" style="font-size:26px;"></td>
</tr>
</tbody>
</table><div id="j_id0:j_id2:j_id24"></div>
</form>
</div>
Add class first to first checkbox in <tr> and add class second to second checkbox in <tr>.
updateTotals only query checkbox which has class first to avoid second.
function updateTotals() {
var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check.first:checked"),(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
$('#checkedTotal').val(sum);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:50%;">
<form id="j_id0:j_id2" name="j_id0:j_id2" method="post">
<input type="hidden" name="j_id0:j_id2" value="j_id0:j_id2">
<input disabled="disabled" id="checkedTotal" name="amount" placeholder="Selected Amount" step=".02" type="number">
<table id="invoicesTable" style="width:100%;">
<thead class="tableHeadBlue">
<tr>
<td>Select</td>
<td>Date</td>
<td>Type</td>
<td>Order</td>
<td>Amount</td>
<td>id</td>
<td>Select2</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:0:inputId" type="checkbox" name="j_id0:j_id2:j_id4:0:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="458.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id7">19/04/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:0:j_id14">00006648</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id16">$458.00</span></td>
<td><span id="j_id0:j_id2:j_id4:0:j_id18">8015D000000CsiH</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:0:j_id20" class="check second" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:1:inputId" type="checkbox" name="j_id0:j_id2:j_id4:1:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="200.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id7">21/06/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:1:j_id14">00006849</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id16">$200.00</span></td>
<td><span id="j_id0:j_id2:j_id4:1:j_id18">8015D000000DEuB</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:1:j_id20" class="check second" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:2:inputId" type="checkbox" name="j_id0:j_id2:j_id4:2:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="500.00">
</label>
</td>
<td>
<span style="color:red;"><span id="j_id0:j_id2:j_id4:2:j_id9">22/06/2018</span>
</span>
</td>
<td><span style="color:red;">Credit</span>
</td>
<td>
<span style="color:red"><span id="j_id0:j_id2:j_id4:2:j_id14">00006852</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:2:j_id16">$500.00</span></td>
<td><span id="j_id0:j_id2:j_id4:2:j_id18">8015D000000DHKW</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:2:j_id20" class="check second" style="font-size:26px;"></td>
</tr>
</tbody>
</table><div id="j_id0:j_id2:j_id24"></div>
</form>
</div>

Checkboxlist check uncheck not working in javascript

I want to show/Hide the div on the basis of selection of checkbox values from the list.
Here is what I tried:-
function valueChanged() {
if ($('#ddlStatus_1').is(":checked"))
$("#divExpense").hide();
else
$("#divExpense").show();
}
and the html is
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status" onchange="valueChanged()">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" /><label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" /><label for="ddlStatus_1">Registration
/ Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" /><label for="ddlStatus_2">7/12
Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" /><label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" /><label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="div1">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>
But it is not working for me.
Add the change event to #ddlStatus_1 instead of table like following.
$('#ddlStatus_1').change(function() {
$("#divExpense").toggle(!this.checked);
})
Here is a running version of the code in my comment. You do not want to add the change to the table tag. If you need all checkboxes in the form to toggle something, then add a class to them and use data-attributes to see what to toggle
Note I changed div1 to divExpense
$(function() {
$('#ddlStatus_1').on("click", function() {
$("#divExpense").toggle(!this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" />
<label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" />
<label for="ddlStatus_1">Registration / Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" />
<label for="ddlStatus_2">7/12 Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" />
<label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" />
<label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="divExpense">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>

Categories