CODEWITHSUNDEEP
javascriptarrays
DivineChef
DivineChef

Reputation: 1221

JavaScript Array need to display many hidden fields

Fiddle link here

<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.

Upvotes: 0

Views: 151

Answers (5)

StackSlave
StackSlave

Reputation: 10627

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

Upvotes: 0

Dissident Rage
Dissident Rage

Reputation: 2716

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

Upvotes: 0

jbsouvestre
jbsouvestre

Reputation: 116

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

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

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.

Upvotes: 1

Oscar Paz
Oscar Paz

Reputation: 18292

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.

Upvotes: 0

Related Questions