So i have a table and some check boxes at the moment:
https://jsfiddle.net/1o7phmkL/
I am trying to change the background color of each "cell" depending on what check boxes are selected. For example if the user is to select the Monday and Saturday check box the monday and saturday cells in the table will get a background colour of red, and only the ones that have a number in.
<form action="" method="get">
<input type="checkbox" name="Monday" value="Monday">Monday<br>
<input type="checkbox" name="Tuesday" value="Tuesday">Tuesday<br>
<input type="checkbox" name="Wednesday" value="Wednesday">Wednesday<br>
<input type="checkbox" name="Thursday" value="Thursday">Thursday<br>
<input type="checkbox" name="Friday" value="Friday">Friday<br>
<input type="checkbox" name="Saturday" value="Saturday">Saturday<br>
<input type="checkbox" name="Sunday" value="Sunday">Sunday<br>
</form>
I have look across the web for an example of how this can work but i can only find example using javascript whereby the "closest" td is changed.
Thanks in advance.
Try this: <script>var boxes = document.getElementsByTagName("input")
for (var i = 0; i < boxes.length; i++) {
if (boxes[i].checked) {boxes[i].style.backgroundColor = "red";}}</script>
add following code to js and try
$(document).on("click",':checkbox',function(){
var val= $(this).val();
val=val.substring(0, 3);
if(this.checked){
selected_Index = $('th:contains("'+val+'")').index()+1;
//console.log(ownerIndex);
$('table tr td:nth-child('+selected_Index+')').css("background","#36ac3b");
}
else
{
$('table tr td:nth-child('+selected_Index+')').css("background","initial");
}
});
See fiddle:
https://jsfiddle.net/1o7phmkL/1/
Below code may help you to find your answer
$(document).ready(function(e) {
$('input[type=checkbox]').change(function() {
var columnNo = $(this).val();
if ($(this).is(':checked')) {
$('table tr td:nth-child('+columnNo+')').each(function(index, element) {
if($(this).html()!= ' ') $(this).css("background-color","#F00");
});
} else {
$('table tr td:nth-child('+columnNo+')').each(function(index, element) {
if($(this).html()!= ' ') $(this).css("background-color","#FFF");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="get">
<input id="1" type="checkbox" name="Monday" value="2">Monday<br>
<input id="2" type="checkbox" name="Tuesday" value="3">Tuesday<br>
<input id="3" type="checkbox" name="Wednesday" value="4">Wednesday<br>
<input id="4" type="checkbox" name="Thursday" value="5">Thursday<br>
<input id="5" type="checkbox" name="Friday" value="6">Friday<br>
<input id="6" type="checkbox" name="Saturday" value="7">Saturday<br>
<input id="0" type="checkbox" name="Sunday" value="1">Sunday<br>
</form>
<table border=1 cellpadding=2 class="calander" >
<tr>
<th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat
</tr>
<tr>
<td> <td> <td> <td> <td>1 <td>2 <td>3
</tr>
<tr>
<td>4 <td>5 <td>6 <td>7 <td>8 <td>9 <td>10
</tr>
<tr>
<td>11 <td>12 <td>13 <td>14 <td>15 <td>16 <td>17
</tr>
<tr>
<td>18 <td>19 <td>20 <td>21 <td>22 <td>23 <td>24
</tr>
<tr>
<td>25 <td>26 <td>27 <td>28 <td>29 <td>30 <td>
</tr>
</table>
Related
I'm working on a simple table that generates number of checkbox, and count the total of how many are checked.
when I unchecked, it will show how many are the remaining checked checkbox.
my problem is when I generate new rows the counter doesn't work anymore.
$('.items').keyup(function() {
var items = $(this).val();
$('span').text(items);
$('table tbody tr').remove();
for (var i = 1; i <= items; i++) {
$('table > tbody').append('<tr><td><input type="checkbox" checked></td></tr>');
}
});
$('input:checkbox').click(function() {
var count = $(this).closest('table').find('input:checkbox:checked').length;
$('span').text(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">
Items
</label>
<input type="text" class="items">
<span>4</span>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
</tbody>
</table>
Use event delegation instead, so that you only need to apply a single listener to the container, otherwise you'll have to re-add listeners to each element every time:
$('.items').keyup(function() {
var items = $(this).val();
$('span').text(items);
$('table tbody tr').remove();
for (var i = 1; i <= items; i++) {
$('table > tbody').append('<tr><td><input type="checkbox" checked></td></tr>');
}
});
$('table').on('click', 'input', function() {
var count = $(this).closest('table').find('input:checkbox:checked').length;
$('span').text(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">
Items
</label>
<input type="text" class="items">
<span>4</span>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
</tbody>
</table>
$('.items').keyup(function() {
var items = $(this).val();
$('span').text(items);
$('table tbody tr').remove();
for (var i = 1; i <= items; i++) {
$('table > tbody').append('<tr><td><input class="checkeboxclass" type="checkbox" checked></td></tr>');
}
});
$('input[type="checkbox"]').on( "change", function() {
var count = $('input[type="checkbox"]:checked').length;
$('span').text(count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">
Items
</label>
<input type="text" class="items">
<span>4</span>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked>
</td>
</tr>
</tbody>
</table>
HelloI would like to tell you that I know there are lots of solved example on stack overflow regarding the same issues.But My query is bit complex and make me sick.I have large number of table that consist of 10 rows and 9 columns.
All I want is when user check the NONE checkbox for STROKE, other checkbox unchecked from the same row.I have to do it for every row.
and if Other checkbox checked (user can check multiple either PARENT,UNCLE,OTHERS,etc.),NONE checkbox will unchecked.
Incase of query ask me.
I am trying from last 2 days for the same, but can successed in it.
Please Help me
Thanks in advance.
HEART NONE PARENT UNCLE/AUNT GRANDPARENT OTHERS
===============================================================
STROKE
ATTACK
B.P.
BLOOD NONE PARENT UNCLE/AUNT GRANDPARENT OTHERS
===============================================================
ANEMIA
IMMUNE
LUKEMIA
Use the same class for same row.In each row you can give different class name and do further same.I given you one row the sample.
$(function(){
$("input[type='checkbox']").click(function(){
if($(this).prop('checked') == true && $(this).attr('class')=='none'){
$(this).closest("tr").find("input[type='checkbox']").each(function(){
$(this).prop('checked', false);
});
$(this).prop('checked',true);
}
else{
$(this).closest("tr").find("input[type='checkbox']").each(function(){
$(this).closest('.none').prop('checked',false);
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='0'>
<tr><th>HEART</th><th>NONE</th><th>PARENT</th><th>UNCLE/AUNT</th><th>GRANDPARENT</th><th>OTHERS</th><tr>
<tr><td>STROKE</td><td><input type='checkbox' class='none'></td><td><input type='checkbox' class='stroke'></td><td><input type='checkbox' class='stroke'></td><td><input type='checkbox' class='stroke'></td><td><input type='checkbox' class='stroke'></td></tr>
<tr><td>ATTACK</td><td><input type='checkbox' class='none'></td><td><input type='checkbox' class='attack'></td><td><input type='checkbox' class='attack'></td><td><input type='checkbox' class='attack'></td><td><input type='checkbox' class='attack'></td></tr>
</table>
$(".checkAll").on("change",function(){
if($(this).is(":checked"))
$(this).closest("tr").find(".check").prop('checked',true);
else
$(this).closest("tr").find(".check").prop('checked',false);
});
td:first-child{
background-color:yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<tbody>
<tr>
<td><input type="checkbox" class="checkAll" />check All1</td>
<td><input type="checkbox" class="check" />check 1</td>
<td><input type="checkbox" class="check" />check 1</td>
</tr>
<tr>
<td><input type="checkbox" class="checkAll" />check All2</td>
<td><input type="checkbox" class="check" />check 2</td>
<td><input type="checkbox" class="check"/>check 2</td>
</tr>
</tbody>
</table>
My solution was to uncheck all the closest checkboxes and recheck the clicked one. (Works with tables)
<script>
$(document).ready(function() {
$(':checkbox').on('change', function() {
$(this).closest('tr').find(':checkbox').prop('checked', false);
$(this).prop('checked', true);
});
});
</script>
This will work ;)
<div>
<input type="checkbox" name="none" value="" id="none">
<input type="checkbox" name="parent" value="" id="parent" class="otherThanNone">
<input type="checkbox" name="uncle" value="" id="uncle" class="otherThanNone">
<input type="checkbox" name="aunt" value="" id="aunt" class="otherThanNone">
</div>
<script>
$(document).ready(function(){
if($('#none').prop('checked')==false){
$('#none').click(function(){
for(var i=0; i<3; ++i){
if($('.otherThanNone').eq(i).prop('checked')==true){
$('.otherThanNone').eq(i).prop('checked', false);
}
}
});
}
$('#parent').click(function(){
$('#none').prop('checked', false);
console.log('a');
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Checkbox selection</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<th>HEART</th>
<th>NONE</th>
<th>PARENT</th>
<th>UNCLE/AUNT</th>
<th>GRANDPARENT</th>
<th>OTHERS</th>
</tr>
<tr>
<td>STROKE</td>
<td class="strokeTD"><input type="checkbox" class="Strokeclass" name="heart"></td>
<td class="strokeTD"><input type="checkbox" class="Strokeclass" name="none"></td>
<td class="strokeTD"><input type="checkbox" class="Strokeclass" name="parent"></td>
<td class="strokeTD"><input type="checkbox" class="Strokeclass" name="uncle"></td>
<td class="strokeTD"><input type="checkbox" class="Strokeclass" name="grandparent"></td>
<td class="strokeTD"><input type="checkbox" class="Strokeclass" name="others"></td>
</tr>
<tr>
<td>ATTACK</td>
<td class="attackTD"><input type="checkbox" class="Strokeclass" name="heart"></td>
<td class="attackTD"><input type="checkbox" class="Strokeclass" name="none"></td>
<td class="attackTD"><input type="checkbox" class="Strokeclass" name="parent"></td>
<td class="attackTD"><input type="checkbox" class="Strokeclass" name="uncle"></td>
<td class="attackTD"><input type="checkbox" class="Strokeclass" name="grandparent"></td>
<td class="attackTD"><input type="checkbox" class="Strokeclass" name="others"></td>
</tr>
<tr>
<td>B.P.</td>
<td class="bpTD"><input type="checkbox" class="Strokeclass" name="heart"></td>
<td class="bpTD"><input type="checkbox" class="Strokeclass" name="none"></td>
<td class="bpTD"><input type="checkbox" class="Strokeclass" name="parent"></td>
<td class="bpTD"><input type="checkbox" class="Strokeclass" name="uncle"></td>
<td class="bpTD"><input type="checkbox" class="Strokeclass" name="grandparent"></td>
<td class="bpTD"><input type="checkbox" class="Strokeclass" name="others"></td>
</tr>
</table>
</body>
<script type="text/javascript">
$(document).on('click','.Strokeclass',function(){
var js_class = $(this).parent().attr('class');
var js_slected = $(this).attr('name');
if(js_slected == 'none')
{
$( '.'+js_class ).each(function( ) {
if($(this).children().attr('name') != 'none')
{$(this).children().prop('checked', false);}
});
}
else if(js_slected == 'others')
{
$( '.'+js_class ).each(function( ) {
if($(this).children().attr('name') == 'none')
{$(this).children().prop('checked', false);}
});
}
});
</script>
</html>
$(".checkAll").on("change",function(){
if($(this).is(":checked"))
$(this).closest("tr").find(".check").prop('checked',true);
else
$(this).closest("tr").find(".check").prop('checked',false);
});
td:first-child{
background-color:yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<tbody>
<tr>
<td><input type="checkbox" class="checkAll" />check All1</td>
<td><input type="checkbox" class="check" />check 1</td>
<td><input type="checkbox" class="check" />check 1</td>
</tr>
<tr>
<td><input type="checkbox" class="checkAll" />check All2</td>
<td><input type="checkbox" class="check" />check 2</td>
<td><input type="checkbox" class="check"/>check 2</td>
</tr>
</tbody>
</table>
How to disable the checkbox with the name="check_no[]" after checking the checkbox name="check_yes[]"?
<tr>
<td colspan="" width="6%">
<center>
<input type="checkbox" name="check_yes[]" value="yes">
</center>
</td>
<td colspan="" width="6%">
<center>
<input type="checkbox" name="check_no[]" value="no">
</center>
</td>
</tr>
You can use a combination of closest() and find() to get the neighbouring child checkbox and then disable it using prop(), something like this:
$('table :checkbox').change(function() {
$(this).closest('tr').find(':checkbox').not(this).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td colspan="" width="6%">
<center>
<input type="checkbox" name="check_yes[]" value="yes">
</center>
</td>
<td colspan="" width="6%">
<center>
<input type="checkbox" name="check_no[]" value="no">
</center>
</td>
</tr>
</table>
$("table [name='check_yes[]']").change(function() {
if($(this).is(":checked")) {
$("[name='check_no[]']").prop('disabled', true);
}
});
This listens for any check_yes[] check and disables all other check_no[] on the page if it was checked
function enab1() {
document.getElementById("check_no").disabled = true;
}
function enab2() {
document.getElementById("check_yes").disabled = true;
}
in your html code
<input type="checkbox" name="check_yes[]" value="yes" onclick="enab1()">
<input type="checkbox" name="check_no[]" value="yes" onclick="enab2()">
Hope this will works
I have an issue with my code. How to substract checkbox value when combobox change. I hope anybody here can help me.
Here is my js code:
//javascript for adding checkbox value and display in text.
<script>
$(document).ready(function(){
$('input[type=checkbox]').click(function(e){
$('#txtInput').val($(this).val())
var total = 0;
var text;
$("input[type=checkbox]:checked").each(function(i,ch) {
total += parseFloat($(this).val());
});
$("#txtInput").val(total);
});
});
</script>
//javascript for substract checkbox value when combobox change
<script>
$(document).ready(function(){
$('.xyz').change(function(){
var tmp = $(this).closest('tr').find("input[type='checkbox']").attr('id');
var substract = 0;
$('#'+tmp+'').prop("checked",false)+(substract -= parseFloat($('#'+tmp+'').val()));
$("#txtInput").val(substract);
});
});
And here is my HTML code:
<table>
<tr>
<th>SELECTION</th>
<th>ACTION</th>
<th>FOOD NAME</th>
</tr>
<tr>
<td><select class="xyz" name="xyz1" id="xyz1"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check1" id="check1" value="1" /></td>
<td>French Fries</td>
</tr>
<tr>
<td><select class="xyz" name="xyz2" id="xyz2"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check2" id="check2" value="3" /></td>
<td>Pizza</td>
</tr>
<tr>
<td><select class="xyz" name="xyz3" id="xyz3"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check3" id="check3" value="5" /></td>
<td>Beef Burger</td>
</tr>
</table>
<input type="text" name="txtInput" id="txtInput" />
First, if I select "Take" in combobox and click checkbox the value will be shown into text.
Second, if I do it again the checkbox will be add the value and show the result into text.
Third, this my problem. If I change combobox into "Cancel" the checkbox only uncheck but can't decrease the value. I want if I change combobox into "Cancel" the value decrease according checkbox selection value and checkbox uncheck.
For any help, I really appreciate it. Thanks.
Make a common function which will read the state of the input elements and do the calculations accordingly.
.parents(selector) will traverse up and will returned matched element.
Try this:
var doCalc = function() {
var total = 0;
var text;
$("input[type=checkbox]:checked").each(function(i, ch) {
if ($(this).parents('tr').find('select option:selected').text() == 'Take') {
total += parseFloat($(this).val());
}
});
$("#txtInput").val(total);
}
$('input[type=checkbox]').change(doCalc);
$('.xyz').change(function() {
if ($(this).find('option:selected').text() == 'Cancel') {
$(this).parents('tr').find('input[type="checkbox"]').prop('checked', false);
}
doCalc();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th>SELECTION</th>
<th>ACTION</th>
<th>FOOD NAME</th>
</tr>
<tr>
<td>
<select class="xyz" name="xyz1" id="xyz1">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check1" id="check1" value="1" />
</td>
<td>French Fries</td>
</tr>
<tr>
<td>
<select class="xyz" name="xyz2" id="xyz2">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check2" id="check2" value="3" />
</td>
<td>Pizza</td>
</tr>
<tr>
<td>
<select class="xyz" name="xyz3" id="xyz3">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check3" id="check3" value="5" />
</td>
<td>Beef Burger</td>
</tr>
</table>
<input type="text" name="txtInput" id="txtInput" />
Fiddle here
An asp:DataList has generated the below html. A Q&A form, where each set has the Qno, Question and options.
//Repeating Set
<table id="tblQuestions" class="tblQuestions">
<tr><td><span class="lbQno">1</span><span>First question</span></td></tr>
<tr>
<td>
<table class="clOptions">
<tr>
<td><input type="radio" value="1/><label>sometext</label</td>
<td><input type="radio" value="2/><label>sometext</label</td>
<td><input type="radio" value="3/><label>sometext</label</td>
</tr>
</table>
</td>
</tr>
</table>
On a button click, I would like to check that all questions are answered.
JS:
//Get the questionslist
//Loop thro' them, assigning each list to a table.
// and then get the Qno and optionslist in that table
var QuestionsList = document.getElementsByClassName("tblQuestions");
function AllQuestionsAnswered() {
for(var i = 0;i<QuestionsList.length;i++)
{
var tbl = QuestionsList[i];
var OptionsList = $('tbl.clOptions input:radio');
$('tbl tr').each(function () {
var QuestionNo = $(this).find('.lbQno').text();
if(QuestionId > 0){
//perform check on each radiobutton of question
}
});
}
}
I am failing here on how to get the controls. All the 3 definitions inside the for loop arent working. How should I proceed further.
Let us assume that you can correct all problems with HTML:
missing " in input's value.
missing name for inputs.
missing > for </label>.
Then you can use this code for check all necessary questions.
Filter all questions that should be checked (based on .lbQno text).
For each filtered questions:
Get length of selected radio buttons for current question.
If there is no selected radio buttons (length equals to 0), then show an error and stop checking.
JavaScript:
$(document).ready(function()
{
function filterElement()
{
return parseInt($(this).find(".lbQno").text()) > 0;
}
$('#check').click(function()
{
$(".tblQuestions").filter(filterElement).each(function()
{
var checkedCount = $(this).find('.clOptions input:radio:checked').length;
if (!checkedCount)
{
alert($(this).find(".lbQno").next().text() + " is not answered");
return false;
}
});
});
});
Fiddle.
Related HTML:
<table id="tblQuestions1" class="tblQuestions">
<tr><td><span class="lbQno">1</span><span>First question</span></td></tr>
<tr>
<td>
<table class="clOptions">
<tr>
<td><input type="radio" name="q1" value="1"/><label>sometext</label></td>
<td><input type="radio" name="q1" value="2"/><label>sometext</label></td>
<td><input type="radio" name="q1" value="3"/><label>sometext</label></td>
</tr>
</table>
</td>
</tr>
</table>
<table id="tblQuestions2" class="tblQuestions">
<tr><td><span class="lbQno">1</span><span>Second question</span></td></tr>
<tr>
<td>
<table class="clOptions">
<tr>
<td><input type="radio" name="q2" value="1"/><label>sometext</label></td>
<td><input type="radio" name="q2" value="2"/><label>sometext</label></td>
<td><input type="radio" name="q2" value="3"/><label>sometext</label></td>
</tr>
</table>
</td>
</tr>
</table>
<table id="tblQuestions3" class="tblQuestions">
<tr><td><span class="lbQno">0</span><span>Unnecessary question</span></td></tr>
<tr>
<td>
<table class="clOptions">
<tr>
<td><input type="radio" name="q0" value="1"/><label>sometext</label></td>
<td><input type="radio" name="q0" value="2"/><label>sometext</label></td>
<td><input type="radio" name="q0" value="3"/><label>sometext</label></td>
</tr>
</table>
</td>
</tr>
</table>
<input id="check" type="button" value="check"/>