JQuery Two 'Select All' Checkboxes Across 2 Tables - javascript

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

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>

Show HTML elements based on array value

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/

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>

Reveal fields if needed

I'm trying to make a contact-form in php. You can find it here.
I try to make the textbox with datepicker invisible until the visitor checks the radiobutton "ja", only then it needs to be visible.
Here's the code for the form:
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div class="reveal-if-active">
<tr>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>
you use $('input[type="radio"]').click(function(){}) to detect you input change see code snippet.
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
/* this is the function to handle you need */
$(function(){
$('input[type="radio"]').click(function(){
if ($('input[type="radio"]#ja').is(':checked'))
{
$(".reveal-if-active").show();
}
else if('input[type="radio"]#nee'){
$(".reveal-if-active").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div >
<!-- make the tr the element to hide and show -->
<tr class="reveal-if-active" style="display:none">
<td ><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>
Firstly, your markup is kinda messed up:
You shouldn't mix div tags with tr, only tr tags should be present on the same 'level' of nesting in table tag
Secondly, answering you actual question - add click event listeners on the radiobuttons, so that when YES is clicked, you make visible your "reveal-if-active" row:
var inputToHide = document.getElementsByClassName("reveal-if-active")[0];
var jaInput = document.getElementById("ja");
var neeInput = document.getElementById("nee");
function makeInputVisibleAgain() {
inputToHide.style.display = "block";
}
function hideInput() {
inputToHide.style.display = "none";
}
jaInput.addEventListener("click", makeInputVisibleAgain);
neeInput.addEventListener("click", hideInput);
Thirdly - don't use several ids with same name, better change your id="nospacing" to class
It is possible that you want something like this? Notice that it's very easy to do it in very few lines of code. Since you're a beginner I'll explain:
$( ... ); is jQuery's way to say "when the page is totally loaded, start executing what's inside". In case you didn't know, without this the scripts would start executing any time and could cause errors, mainly because of not finding the elements you work with.
$('input[name="reservatie"]').change(function(){ ... });: the radio buttons have name "reservatie", so when they are changed it will execute the function inside change().
$('#reveal').prop('hidden', !$('#ja').prop('checked'));: I identified the row of the table where the datepicker was as "reveal", because, maybe I'm wrong, but putting one row of it inside of a div didn't let my code go well, so I believe that was just wrong. I deleted the div and used the row instead. So, its attribute hidden will be the opposite of the checked property of "ja", which means, if "ja" is checked, the datepicker won't be hidden, and if it's not, it will.
Hope it helps you.
$(function(){
$('input[name="reservatie"]').change(function(){
$('#reveal').prop('hidden', !$('#ja').prop('checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<tr id="reveal" hidden>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>

Hide/show content depending on selected checkbox

I'm trying to make a form which contains a checkbox question of "yes" or "no". If the user answers the checkbox "yes", the rest of the form will show, but if the user answers "no" then the rest of the form will keep the hidden properties.
I have this fiddle http://jsfiddle.net/Eliasperez/c3ay7jdy/2/
Both codes work great but I can't seem to make them work together. I'd love to have some help with this. I want the user to select one checkbox only and to have the fields hidden until the user checks the "yes" option. The "no" option should be checked by default. Feel free to ask for any further explanation or info.
<script>
$("#CAT_Custom_1186889_1").change(function(){
var self = this;
$("#tableID tr.rowClass").toggle(!self.checked);
}).change();
$('input[type="checkbox"]').on('change', function () {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});
</script>
<table id="tableID">
<tbody>
<tr>
<td>
<label class="label16">¿Cuentas con Embajador Blive?</label>
<br />
<input type="checkbox" name="CAT_Custom_1186889" id="CAT_Custom_1186889_0" value="Si" class="boxcheck">Si
<input checked="checked" type="checkbox" name="CAT_Custom_1186889" id="CAT_Custom_1186889_1" value="No" class="boxcheck">No
<br />
<br />
<br />
</td>
</tr>
<tr class="rowClass">
<td>This 2 rows will disapear! </td>
</tr>
<tr class="rowClass">
<td>This 2 rows will disapear!</td>
</tr>
</tbody>
</table>
Add the if condition :
if ($(this).val()=="Si"){/*Show the form*/}
$("#CAT_Custom_1186889_1").change(function(){
var self = this;
$("#tableID tr.rowClass").toggle(!self.checked);
}).change();
$('input[type="checkbox"]').on('change', function () {
if ($(this).val()=="Si"){
$(".rowClass").show();
}
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tableID">
<tbody>
<tr>
<td>
<label class="label16">¿Cuentas con Embajador Blive?</label>
<br />
<input type="checkbox" name="CAT_Custom_1186889" id="CAT_Custom_1186889_0" value="Si" class="boxcheck">Si
<input checked="checked" type="checkbox" name="CAT_Custom_1186889" id="CAT_Custom_1186889_1" value="No" class="boxcheck">No
<br />
<br />
<br />
</td>
</tr>
<tr class="rowClass">
<td>This 2 rows will disapear! </td>
</tr>
<tr class="rowClass">
<td>This 2 rows will disapear!</td>
</tr>
</tbody>
</table>
If you want the user to only make one choice from several options, use radio buttons, not checkboxes. Users have certain expectations when it comes to the interface and using checkboxes would be counter-intuitive.
Here's the code you can use:
$('input[name="CAT_Custom_1186889"]').change(function () {
var self = this;
console.log(this.value)
$("#tableID tr.rowClass").css('display', (this.value == 'Si') ? 'block' : 'none');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tableID">
<tbody>
<tr>
<td>
<label class="label16">¿Cuentas con Embajador Blive?</label>
<br />
<input type="radio" name="CAT_Custom_1186889" id="CAT_Custom_1186889_0" value="Si" class="boxcheck">Si
<input checked="checked" type="radio" name="CAT_Custom_1186889" id="CAT_Custom_1186889_1" value="No" class="boxcheck">No
<br />
<br />
<br />
</td>
</tr>
<tr class="rowClass">
<td>This 2 rows will disapear!</td>
</tr>
<tr class="rowClass">
<td>This 2 rows will disapear!</td>
</tr>
</tbody>
</table>

Categories