Question

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>

当我选择check1，check2时，我需要做的大约20次是显示隐藏字段info1，info2等。

Answer 1

首先，在Javascript中找到处理程序而不是内联事件总是一个好主意。

其次，为所有输入提供相同的课程。

有一个 data - * 属性，用于存储相应的输入消息。

您的HTML看起来像

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

这是这样做的一种方式。

Answer 2

我已更新了您的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';
    }
});

我没有为每个复选框创建一个if ... else块，这很难维护，我通过自定义属性data-info-id将每个检查与其DIV相关联，该属性设置为上述DIV。

我将'change'事件绑定到文档（事件委托），当它触发时我检查source元素是否有data-info-id属性。然后，我得到具有此ID的DIV，并根据checked属性的值显示或隐藏它。

通过自定义属性以这种方式执行此操作的明显优势在于，您不依赖于div的位置，并且您可以更改哪些检查以声明方式显示DIV，只需更改HTML。 / p>

Answer 3

也许您正在寻找一个仅限javascript的解决方案，但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

Answer 4

查找具有data-enable属性的输入，该属性与正在显示/隐藏的元素的id匹配。

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

Answer 5

查看以下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);
}
//]]>

JavaScript Array需要显示许多隐藏字段

5 个答案: