Question

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

问题：

单击复选框1然后单击复选框2时，复选框1触发的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

让这个行为正确的最简单方法是在将所选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 3

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

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 4

在这种情况下，我将一个全局变量设置为“unhidden”时显示的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的情况下完成。

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

4 个答案: