17

少なくとも 1 がチェックされている場合、チェックボックスと表示される div を含むページが必要です。

ここで、チェックボックスをオンにすると、div が表示されるページが表示されます。正常に動作し、問題ありません。

3 つのチェックボックスをオンにして 1 つのチェックボックスをオフにすると、div が表示されません。いくつかのボックスをもう一度オンにすると、div が表示されます - 正しくありません。

この「ジャンプ」せずに、少なくとも1つのチェックボックスがチェックされている場合、divを常に表示するようにスクリプトを変更するにはどうすればよいですか?

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

3 に答える 3

32

入力ボックスを次のように変更します

<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

および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;


}

ここにデモフィドルがあります

于 2013-08-24T17:22:09.863 に答える
2

すべてのチェックボックスの状態を常に考慮する必要があります。

チェックまたはチェック解除の数を増減できますが、そのうちの 3 つがチェックされているサイトの負荷を想像してみてください。

したがって、常にそれらすべてを確認する必要があります。

<script type="text/javascript">
<!--
function showMe (it, box) {
  // consider all checkboxes with same name
  var checked = amountChecked(box.name);

  var vis = (checked >= 3) ? "block" : "none";
  document.getElementById(it).style.display = vis;
}

function amountChecked(name) {
  var all = document.getElementsByName(name);

  // count checked
  var result = 0;
  all.forEach(function(el) {
    if (el.checked) result++;
  });

  return result;
}
//-->
</script>
于 2013-08-24T17:18:48.873 に答える