JavaScript Array need to display many hidden fields

Question

<script>
function show1() {
if (document.getElementById("check1").checked == true) {
document.getElementById("info1").style.display="inline";
  } else {
  if (document.getElementById("check1").checked == false)
 document.getElementById("info1").style.display="none"; 
    }
}
</script>

 <input type="checkbox" id="check1" name="check1" value="" onclick="show1();">

<style>
    #info1, #info2 {
    display: none;
}   
</style>

What I need to do about 20 times is to show hidden fields info1, info2 etc. when check1, check2 is selected.

Are each checkbox and their respective field going to be in a shared element (i.e. li)? — Dissident Rage
– Dissident Rage, Commented Mar 7, 2014 at 23:34

Sushanth -- · Accepted Answer · 2014-03-07 23:43:26Z

First it is always a good idea to find handlers in Javascript instead of inline events.

Second give all your inputs the same class to do so.

Have a data-* attribute that will store the corresponding input message.

You HTML would look like

HTML

<div class="container">
    <div>
        <input type="checkbox" id="check1" name="check1" value="" data-id="info1" class="checkbox"/>
        <label for="check1">Click here for more information</label>
    </div>
     <div id="info1" class="info">Hidden information here will now appear onclick check1</div>
</div>
<div class="container">
    <div>
        <input type="checkbox" id="check2" name="check3" value="" data-id="info2" class="checkbox"/>
        <label for="check2">Click here for more information</label>
    </div>
     <div id="info2" class="info">Hidden information here will now appear onclick check2</div>
</div>
<div class="container">
    <div>
        <input type="checkbox" id="check3" name="check3" value="" data-id="info3" class="checkbox"/>
        <label for="check3">Click here for more information</label>
    </div>
     <div id="info3" class="info">Hidden information here will now appear onclick check3</div>
</div>

JS

// Get all the checkbox elements

var elems = document.getElementsByClassName('checkbox');

// iterate over and bind the event
for(var i=0; i< elems.length; i++) {
     elems[i].addEventListener('change', show);   
}

function show() {
    // this corresponds to the element in there
    // Get the info attribute id
    var infoId = this.getAttribute('data-id');
    if (this.checked) {
        document.getElementById(infoId).style.display = "inline";
    } else {
       document.getElementById(infoId).style.display = "none";
    }
}

Check Fiddle

This is one way of doing this.

Oscar Paz · Accepted Answer · 2014-03-07 23:39:54Z

I've updated your jsfiddle:

document.addEventListener('change', function(e) {
    var id = e.target.getAttribute('data-info-id');
    var checked = e.target.checked;
    if (id) {
        var div = document.getElementById(id);
        if (div) div.style.display = checked ? 'block' : 'none';
    }
});

Instead of creating an if ... else block for every checkbox, which becomes hard to maintain, I've associated every check with its DIV via the custom attribute data-info-id, which is set to the id of the aforementioned DIV.

I bind the 'change' event to the document (event delegation) and when it fires I check the source element has a data-info-id attribute. Then, I get the DIV with such id and show or hide it based on the value of the checked property.

The obvious advantage of doing it this way, via custom attributes, is that you don't depend of the position of the div, and you can change which checks shows what DIV in a declarative way, just changing the HTML.

jbsouvestre · Accepted Answer · 2014-03-07 23:47:32Z

0

Maybe you are looking for a javascript only solution, but there's a pretty simple solution in CSS

HTML

<div> 
    <input type="checkbox" id="check1" name="check1" value="" />
    <label for="check1"> Click here for more information</label>
    <div id="info1">Hidden information here will now appear onclick </div>
</div>

 <div> 
    <input type="checkbox" id="check2" name="check2" value=""/>
    <label for="check2"> Click here for more information</label>
    <div id="info2">Hidden information here will now appear onclick </div>
</div>

CSS

input[type=checkbox] ~ div {
    display: none;
}

input[type=checkbox]:checked ~ div {
    display: block;
}

Fiddle here

answered Mar 7, 2014 at 23:47

jbsouvestre

1165 bronze badges

Comments

Dissident Rage · Accepted Answer · 2014-03-07 23:57:37Z

Looks for an input with the data-enable attribute that matches to the id of the element being shown/hidden.

HTML

<input type="checkbox" data-enable="info0" name="check[]"/>
<input type="text" id="info0" name="info[]"/>

Javascript

function toggleEl(evt) {
    var checkbox = evt.target;
    var target = checkbox.getAttribute('data-enable');
    var targetEl = document.getElementById(target);

//  if checked, use backed-up type; otherwise hide
    targetEl.type = (checkbox.checked)
        ? targetEl.getAttribute('data-type')
        : 'hidden';
}

var inputs = document.getElementsByTagName('input');

for(var i=0,l=inputs.length;i<l;i++) {
    var input = inputs[i];
    var target = input.getAttribute('data-enable');

    if(target!==null) {
        var targetEl = document.getElementById(target);

    //  back-up type
        targetEl.setAttribute('data-type',targetEl.type);

    //  hide it if the checkbox is not checked by default
        if(!input.checked)
            { targetEl.type = 'hidden'; }

    //  add behavior
        input.addEventListener('change',toggleEl,false);
    }
}

StackSlave · Accepted Answer · 2014-03-08 00:09:27Z

0

Check out the following JSFiddle .

//<![CDATA[
// common.js
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
  if(IE >= version)bod.className = className;
}
function E(e){
  return doc.getElementById(e);
}
//]]>

//<![CDATA[
// adjust numbers as needed
for(var i=1; i<2; i++){
  (function(i){
    E('check'+i).onclick = function(){
      var a = E('info'+i).style.display = this.checked ? 'block' : 'none';
    }    
  })(i);
}
//]]>

answered Mar 8, 2014 at 0:09

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

JavaScript Array need to display many hidden fields

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related