如果选中复选框，则显示隐藏的 div

Question

我有两个复选框。 “onclick”触发的checkBoxValidate函数保证两个复选框不能同时被选中。同样由“onclick”触发的 showMe 函数在单击复选框时显示隐藏的 div。一切都很好。

问题：

点击checkbox1再点击checkbox2时，checkbox1触发的div不会自动隐藏。这个想法是，当未选中复选框时，由它触发的 div 不应该是可见的......请看演示。

谢谢！

演示：

http://jsbin.com/iNuPAREq/1/edit?html,js,output

HTML：

<form action="whatever" name="comanda11" method="post" onsubmit="return validate(this)">

<input type="checkbox" name="c1" onclick="showMe('content1'); checkBoxValidate(0);">

<input type="checkbox" name="c1" onclick=" showMe('content2'); checkBoxValidate(1);">

<div id="content1" style="display:none">
Content 1
</div>

<div id="content2" style="display:none">
Content 2
</div>

</form>

JS：

    function showMe(box) {
        var chboxs = document.getElementsByName("c1");
        var vis = "none";
        for (var i = 0; i < chboxs.length; i++) {
            if (chboxs[i].checked) {
                vis = "block";
                break;
            }
        }
        document.getElementById(box).style.display = vis;
    }

    function checkBoxValidate(cb) {
        for (j = 0; j < 8; j++) {
            if (eval("document.comanda11.c1[" + j + "].checked") == true) {
                document.comanda11.c1[j].checked = false;
                if (j == cb) {
                    document.comanda11.c1[j].checked = true;
                }
            }
        }
    }

Answer 1

更改标记以使用单选按钮，并删除内联 javascript：

<form action="whatever" name="comanda11" method="post">
    <input type="radio" name="c1" data-rel="content1" />
    <input type="radio" name="c1" data-rel="content2" />
    <div id="content1" style="display:none">Content 1</div>
    <div id="content2" style="display:none">Content 2</div>
</form>

然后做

var elems = document.getElementsByName('c1');

for (var i=elems.length; i--;) {
    if (elems[i].addEventListener) {
        elems[i].addEventListener ('change',fn,false);
    }else if (elems[i].attachEvent) {
        elems[i].attachEvent ('onchange',fn); 
    }
}

function fn() {
    var rel = this.getAttribute('data-rel');
    document.getElementById(rel=='content1'?'content2':'content1').style.display = 'none';
    document.getElementById(rel).style.display = 'block';
}

FIDDLE

如果您只需要使用复选框，这里有一个可行的解决方案：

var elems = document.getElementsByName('c1');

for (var i=elems.length; i--;) {
    if (elems[i].addEventListener) {
        elems[i].addEventListener ('change',fn,false);
    }else if (elems[i].attachEvent) {
        elems[i].attachEvent ('onchange',fn); 
    }
}

function fn() {
    var rel   = this.getAttribute('data-rel');

    for (var i=elems.length; i--;) {
        if (elems[i] != this) elems[i].checked = false;
        var id = elems[i].getAttribute('data-rel');
        document.getElementById(id).style.display = elems[i].checked ? 'block' : 'none';
    }
}

FIDDLE

Answer 2

不是一个优雅的解决方案，但它适用于您的情况

function showMe (box) {
        var chboxs = document.getElementsByName("c1");
        var vis = "none";
        document.getElementById("content1").style.display = "none";
        document.getElementById("content2").style.display = "none"; 
        for(var i=0;i<chboxs.length;i++) 
        { 
          if(chboxs[i].checked)
          {
             vis = "block";
                break;
           }
        }
        document.getElementById(box).style.display = vis;  

}

Answer 3

要使其正常运行，最简单的方法是在将所选 div 设置为 block 之前将所有 div 设置为隐藏。

var divs = [document.getElementsByName("content1"),document.getElementsByName("content2")];
for(var i=0; i < divs.length; i++_ {
    divs[i].style.display = 'none'
}

上面的代码应该在上面 document.getElementById(box).style.display = vis;

请注意，使用 DOM 元素有很多更好的方法。我建议将 jQuery 视为一种更简单的方法。此外，手动构建一个包含两个 div 元素的数组并不是最好的方法，但我不想冒险抓取文档中可能存在的其他 div。

Answer 4

在这种情况下，我为“未隐藏”时显示的 div 设置了一个全局变量。以“lastdiv”为例。

var lastdiv=false;
function showme(){
 if(lastdiv){lastdiv.style.display='none';}
 lastdiv=?????? // your code to find the div to unhide
 lastdiv.style.display='block';
}

您的代码中还有很多其他问题需要解决，包括在显然没有保证的情况下使用 eval。在不使用 eval 的情况下有更好的方法。