0

フォームに複数のチェックボックスがあります。これらのチェックボックスのクリックに基づいて、div セクションを表示します。しかし、チェックボックスを 1 つでもオフにすると、その div セクションが非表示になります。すべてのチェックボックスがオフになっている場合にのみ、div セクションが非表示になるようにするにはどうすればよいですか。粗い方法は、すべてのチェックボックスがオフになっているかどうかを確認してから div セクションを非表示にする独自の「表示」メソッドを作成することです。もっと簡単な解決策はありますか??

4

6 に答える 6

3

HTML：

<input type="checkbox" class="group" name="check1">
<input type="checkbox" class="group" name="check2">
<input type="checkbox" class="group" name="check3">
<input type="checkbox" class="group" name="check4">

jQuery：

$(function() {
    var $checks = $('input:checkbox.group');
    $checks.click(function() {
        if($checks.filter(':checked').length == 0) {
            $('#div').hide();
        } else {
            $('#div').show();
        }
    });
});
于 2010-07-20T17:55:39.240 に答える
2

次のコードは、1 つ以上のチェックボックスがオンになっている場合に div を表示します。

jQuery

バージョン 1:

$("input[name='mycheckboxes']").change(function() {
  $("#showme").toggle($("input[name='mycheckboxes']:checked").length>0);
});

バージョン 2 (より効率的):

var MyCheckboxes=$("input[name='mycheckboxes']");

MyCheckboxes.change(function() {
  $("#showme").toggle(MyCheckboxes.is(":checked"));
});

HTML

<input type="checkbox" name="mycheckboxes" />
<input type="checkbox" name="mycheckboxes" />
<input type="checkbox" name="mycheckboxes" />
<input type="checkbox" name="mycheckboxes" />

<div id="showme" style="display: none">Show me</div>

コードの動作 (バージョン 1)。

コードの動作 (バージョン 2)。

---異なるチェックボックス名のバージョン---

DIV異なる名前のチェックボックスについては、それらを識別子でラップします。例えば

jQuery

var MyCheckboxes=$("#checkboxgroup :checkbox");

MyCheckboxes.change(function() {
  $("#showme").toggle(MyCheckboxes.is(":checked"));
});

HTML

<div id="checkboxgroup">
  <input type="checkbox" name="mycheckbox1" />
  <input type="checkbox" name="mycheckbox2" />
  <input type="checkbox" name="mycheckbox3" />
  <input type="checkbox" name="mycheckbox4" />
</div>

<div id="showme" style="display: none">Show me</div>

このコードは動作中です。

于 2010-07-20T18:05:55.757 に答える
1

チェックされたチェックボックスの数を追跡する変数を使用する関数を作成します。

var numberOfChecks = 0;
function display(ev) {
  var e = ev||window.event;
  if (this.checked) {
    numberOfChecks++;
  } else {
    numberOfChecks--;
  }
  if (!numberOfChecks) {
    //hide div code
  } else {
    //display div code
  }
}

すべてのチェックボックスの onClick イベントごとにその関数を使用します。理想的な世界では、これはいくつかの初期化関数内で行われるため、グローバル名前空間にはありませんnumberOfChecks。display

于 2010-07-20T18:25:39.087 に答える
1

プレーン Javascript:

HTML

<div id="checkboxes">
<input type="checkbox" name="check1">
<input type="checkbox" name="check2">
<input type="checkbox" name="check3">
<input type="checkbox" name="check4">
</div>

<div id="hiddendiv"><!-- more stuff --></div>

Javascript

(function() { //Create clousre to hide the checked variable
var checked = 0;
var inputs = document.getElementById('checkboxes').getElementsByTagName('input');
for (var i=0, l=inputs.length; i<l; i++) {
  if (inputs[i].type == 'checkbox') {
     if (inputs[i].checked) checked++; //Count checkboxes that might be checked on page load
     inputs[i].onchange = function() {
       checked += this.checked ? 1 : -1;

       var hiddendiv = document.getElementById('hiddendiv');
       if (!checked) hiddendiv.style.display = "none";
       else hiddendiv.style.display = "";
     };
  }
}
}());

changeもう 1 つのオプションは、カウントに依存するのではなく、イベントが発生するたびに各チェックボックスを単純に反復することです。これは、おそらくエラーが発生しやすくなります。明らかに、jQuery はより簡潔ですが、多少の冗長性が問題になることはありません。

于 2010-07-20T18:31:38.903 に答える
1

そうではありませんが、これにはJavascriptが必要です...または多分...言ってみましょう:

<html>
<head>
<style type="text/css">
  #input_container > input + input + input + div {display:none}
  #input_container > input:checked + input:checked + input:checked + div {display:block}
</style>
</head>
<div id="input_container">
  <input type="checkbox">blah1
  <input type="checkbox">blah2
  <input type="checkbox">blah3
  <div>To show/hide</div>
</div>
</body>
</html>
于 2010-07-20T17:53:50.200 に答える