Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
451 views
in Technique[技术] by (71.8m points)

javascript - Show/hide div if checkbox selected

I need a page with checkboxes and visible div if at minimum 1 is checked.

Here I got page that if i check checkbox, the div will show. It's okay and works correctly.

When I check 3 checkboxes and uncheck 1, the div is missing, when i check some box again, the div will show - it isn't correct.

How do I need modify the script to show all time the div, if at minimum 1 checkbox is checked, without this "jumping"?

<html>
<head>
<title>CB Hide/Show</title>
<script type="text/javascript">
<!--
function showMe (it, box) {
  var vis = (box.checked) ? "block" : "none";
  document.getElementById(it).style.display = vis;
}
//-->
</script>
</head>
<body>
<h3 align="center"> This JavaScript shows how to hide divisions </h3>

<div id="div1" style="display:none">
<table border=1 id="t1">
<tr>
<td>i am here!</td>
</tr>
</table>
</div>

<form>
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox



</form>
</body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

change the input boxes like

<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox

and js code as

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;


}

here is a demo fiddle


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...