0 
<script type="text/javascript">
 function myFunction() {
   if (document.getElementById("ChkChildIssue").checked)
   {
    document.getElementById("dhamale").style.display="none";
    document.getElementById("sachin").style.display="block"; 
   }
   else
   {
     document.getElementById("dhamale").style.display="block";
     document.getElementById("sachin").style.display="none"; 
   }
 }
</script>

<body>
<input type="Checkbox" name="ChkChildIssuess" id="ChkChildIssue"  onclick="myFunction();" />Include Child issue</br>

<div id="dhamale" > </div>
<div id="sachin" style="display:none;" > </div> // i want this div by default diaplay

选中复选框时，将隐藏 div "dhmale" 并显示 div "sachin" ，反之亦然。

但是，当复选框被选中时，不会显示 div "sachin"。

(document.getElementById("sachin").style.display="block" //this is not working
4

1 回答 1

0

您的代码应该可以工作。但为什么要使用 javascript？您可以使用 css 完美解决这个问题。

<div class="toggle-wrapper">
    <input type="checkbox" name="toggler"/>Toggler
    <div class="content">
        <div class="active">This is the active box</div>
        <div class="inactive">This is the inactive box</div>
    </div>
</div>

.content {
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 100px;
}

.content > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #dfdfdf;
}
input[type="checkbox"]:checked + .content .active {
    z-index: 1;
}

http://jsfiddle.net/TfceP/

于 2013-09-10T10:32:25.737 回答