We Keep Coding

can't uncheck the check box (hide content while checkbox is unchecked)

I'd like to hide div content while checkbox is unchecked.
Here's my code
I've made almost the same function for the div with id "focus" (big grey frame):
document.getElementById("checkFocus").onchange = function() {
var one = document.getElementById("focus");
if (document.getElementById("checkFocus").checked === true) {
one.style.display = "block";
}
else one.style.display = "none";
}
And it works!
So, I don't understand why the next function doesn't works at all:
document.getElementById("checkMass").onchange = function() {
var elem = document.querySelector("PeriodicTable")
var mass = elem.querySelectorAll("div.element > div.mass");
if (document.getElementById("checkMass").checked === true) {
mass.style.display = "block";
}
else mass.style.display = "none";
}
What am I doing wrong?

elem.querySelectorAll("div.element > div.mass"); doesn't return a single element, it returns a collection of all matches.
That said you can't do mass.style.display on a array, only on a single element so you need to do
if (document.getElementById("checkMass").checked === true) {
for (var i = 0; i < mass.length; i++) {
mass[i].style.display = "block";
}
else {
for (var i = 0; i < mass.length; i++) {
mass[i].style.display = "none";
}
}
instead.

The querySelector("Any CSS rule") needs a rule, . signify class, # signify id, but you have querySelector("PeriodicTable"). Therefor you are looking for elements with tagname of PeriodicTable. Either use document.getElementById('PeriodicTable') or querySelector("#PeriodicTable")
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Javascript click function not working in IE 8

I have a javascript function that works for Chrome, Firefox, and IE 11, but not for IE 8, which is what my client uses.
function ToggleSelectAll(this_id) {
var chk = document.getElementById(this_id).childNodes[0];
var lblID = "lblSelectAll" + chk.id.slice(-1);
var lbl = document.getElementById(lblID);
var items = $(lbl).closest('div.segment_container')[0].childNodes;
if (document.getElementById(chk.id).checked == false) {
lbl.innerHTML = "Select All";
for (i = 0; i < items.length; i++) {
if (items[i].className == "checkbox") {
var bx = $(items[i]).children()[0];
bx.checked = false;
var label = $(items[i]).children()[1];
label.style.background = '#CCC';
}
}
}
else {
lbl.innerHTML = "Clear All";
for (i = 0; i < items.length; i++) {
if (items[i].className == "checkbox") {
var bx = $(items[i]).children()[0];
bx.checked = true;
var label = $(items[i]).children()[1];
label.style.background = '#C1ECFA';
}
}
}
};
The function is run via onclick of a div. chk is a checkbox inside div that, when checked, selects/deselects all checkboxes within the parent container. I've tried replacing the .childnodes with .children and .firstElementChild, but it didn't help. Through the debugger, I can see that the values for chk, lblID, and lbl are the same in IE as they are in Chrome
Edit
Here is the jsfiddle with some relevant html: http://jsfiddle.net/zNEyb/1/

javascript collapse table cookie

I came up with the script to collapse a table
<script type="text/javascript">
var rowVisible = true;
function toggleDisplay(tbl) {
var tblRows = tbl.rows;
for (i = 0; i < tblRows.length; i++) {
if (tblRows[i].className != "headerRow") {
tblRows[i].style.display = (rowVisible) ? "none" : "";
}
}
rowVisible = !rowVisible;
}
</script>
<div class="datagrid"><table id="thread_1">
<thead><tr class="headerRow">
<th WIDTH="100">SLO</th>
It works fine but my problem is that I want to save the state when person leaves the website. I guess that the easiest way would be with cookie. I just haven't done something like this before. How can I do that?

If you don't need to support, let say IE7 you can use browser localStorage.
// Our flag to determine if rows are hidden or not
var rowsVisible = localStorage.getItem('rowsVisible'),
// Table handler
table = document.getElementById('table');
// "rowHidden" not exists in localStorage yet
if (rowsVisible === null) {
rowsVisible = true;
} else {
// localStorage return string
rowsVisible = rowsVisible === 'true' ? true : false;
}
toggleDisplay(table, rowsVisible ? '' : 'none');
document.getElementById('toggleBtn').addEventListener('click', function() {
toggleDisplay(table);
}, false);
function toggleDisplay(tbl) {
var tblRows = table.rows,
mode = rowsVisible ? '' : 'none';
for (i = 0; i < tblRows.length; i++) {
if (tblRows[i].className != "headerRow") {
tblRows[i].style.display = mode;
}
}
localStorage.setItem('rowsVisible', rowsVisible);
rowsVisible = !rowsVisible;
};
Demo: http://jsfiddle.net/SXAZ4/36/

Hiding all elements with the same class name?

I'm trying to hide elements with the same class name (float_form), but I'm also trying to use the script below to show them (all of the float_form class divs are initially hidden). I've looked at a lot of jquery solutions, but I can't seem to make any of them work for this.
function show(a) {
var e = document.getElementById(a);
if (!e)
return true;
if (e.style.display == "none") {
e.style.display = "block"
} else {
e.style.display = "none"
}
return true;
}
​
Edit: Sorry if it wasn't clear, I do not intend to use Jquery(and I know that this is not jquery). I am looking for a way to use javascript to recognize repeated classnames that are not in style= display:none; without compromising the show/hide ID element since there is a loop with the div id as the key. The html for the div looks like below, with {item.ID} being a while loop.
<div class="float_form" id="{item.ID}" style="display: none;">

vanilla javascript
function toggle(className, displayState){
var elements = document.getElementsByClassName(className)
for (var i = 0; i < elements.length; i++){
elements[i].style.display = displayState;
}
}
toggle('float_form', 'block'); // Shows
toggle('float_form', 'none'); // hides
jQuery:
$('.float_form').show(); // Shows
$('.float_form').hide(); // hides

If you're looking into jQuery, then it's good to know that you can use a class selector inside the parameters of $ and call the method .hide().
$('.myClass').hide(); // all elements with the class myClass will hide.
But if it's a toggle you're looking for, use .toggle();
But here's my take on a good toggle without using jQuery:
function toggle( selector ) {
var nodes = document.querySelectorAll( selector ),
node,
styleProperty = function(a, b) {
return window.getComputedStyle ? window.getComputedStyle(a).getPropertyValue(b) : a.currentStyle[b];
};
[].forEach.call(nodes, function( a, b ) {
node = a;
node.style.display = styleProperty(node, 'display') === 'block' ? 'none' : 'block';
});
}
toggle( '.myClass' );
Demo here (Click "Render" to run): http://jsbin.com/ofusad/2/edit#javascript,html

Using jquery
$(".float_form").each(function(){
if($(this).css("display") == "none"){
$(this).show();
}else{
$(this).hide();
}
});

No jQuery needed
const toggleNone = className => {
let elements = document.getElementsByClassName(className)
for (let i = 0; i < elements.length; i++){
if (elements[i].style.display === "none") {
elements[i].style.display = "";
} else {
elements[i].style.display = "none";
}
}
}
const toggleVisibility = className => {
let elements = document.getElementsByClassName(className)
for (let i = 0; i < elements.length; i++){
let elements = document.getElementsByClassName(className);
if (elements[i].style.visibility === "hidden") {
elements[i].style.visibility = "";
} else {
elements[i].style.visibility = "hidden";
}
}
}
// run
toggleNone('your-class-name-here'); // toggles remove
// or run
toggleVisibility('your-class-name-here'); // toggles hide
Answer provided in ES6 syntax but easily can be converted to ES5 if you wish

Try :
function showClass(a){
var e = [];
var e = getElementsByClassName(a);
for(i in e ){
if(!e[i])return true;
if(e[i].style.display=="none"){
e[i].style.display="block"
} else {
e[i].style.display="none"
}
}
return true;
}
demo : showClass("float_form");

How to check dynamically checkbox in form if there is a match

I'm using a piece of code to check in a form if a checkbox matches the content of a given variable.
Everything works great but the thing is that I'd like to have this checkbox checked if I have a match but I don't know how to do this.
my javascript code to see if there is a match :
<script type="text/javascript">
function loopForm(form,job) {
var cbResults = 'Checkboxes: ';
var radioResults = 'Radio buttons: ';
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'checkbox') {
if (form.elements[i].id == job) {
// This works great but I'd like instead to have the element checked
alert(job);
}
}
}
}
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var job = filename.split("-");
var metier = job[0];
loopForm(document.formulaire,metier);
</script>

if (form.elements[i].id == job) {
form.elements[i].checked = true;
}

just
form.elements[i].checked = true;