web-dev-qa-db-ja.com

HTMLのトライステートチェックボックス？

HTMLにトライステートチェックボタン（はい、いいえ、null）を持つ方法はありませんか？

全体を自分でレンダリングする必要がない単純なトリックや回避策はありますか？

htmlformscheckbox
153
Pekka 웃

Edit— Janus Troelsenのコメントのおかげで、より良い解決策が見つかりました。

HTML5はindeterminateと呼ばれるチェックボックスのプロパティを定義します

w3cリファレンスガイド を参照してください。チェックボックスを視覚的に不確定に表示するには、trueに設定します。

element.indeterminate = true;

ヤヌストロエルセンのフィドル です。ただし、次のことに注意してください。

  • indeterminate状態はHTMLマークアップでは設定できません。Javascriptを介してのみ設定できます（この JSfiddleテスト およびこの CSSトリックの詳細な記事 を参照）

  • この状態はチェックボックスの値を変更せず、入力の実際の状態をマスクする視覚的な合図にすぎません。

  • ブラウザテスト：Chrome 22、Firefox 15、Opera 12でIE7に戻りました。モバイルブラウザに関しては、Android 2.0ブラウザとiOS 3.1上のSafariモバイルはサポートしていません。

前の回答

もう1つの方法は、「選択された」状態のチェックボックスの透明度を使用することです（Gmailとして する 以前のバージョンで使用されていました）。いくつかのjavascriptとCSSクラスが必要です。ここに、チェック可能な項目とそれらのすべて/なしを選択できるチェックボックスを含むリストを処理する特定の例を示します。このチェックボックスは、リスト項目の一部が選択されたときに「選択された」状態を示します。

ID #select_allのチェックボックスとクラス.select_oneのいくつかのチェックボックスを指定すると、

「すべて選択」チェックボックスをフェードするCSSクラスは次のようになります。

.some_selected {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

また、すべて選択チェックボックスのトライステートを処理するJSコードは次のとおりです。

$('#select_all').change (function ()
{
    //Check/uncheck all the list's checkboxes
    $('.select_one').attr('checked', $(this).is(':checked'));
    //Remove the faded state
    $(this).removeClass('some_selected');
});

$('.select_one').change (function ()
{
  if ($('.select_one:checked').length == 0)
      $('#select_all').removeClass('some_selected').attr('checked', false);
  else if ($('.select_one:not(:checked)').length == 0)
      $('#select_all').removeClass('some_selected').attr('checked', true);
  else
      $('#select_all').addClass('some_selected').attr('checked', true);
});

ここで試すことができます： http://jsfiddle.net/98BMK/

お役に立てば幸いです！

110
pau.moreno

HTMLの indeterminate IDL属性 をinput要素で使用できます。

46
Ms2ger

私の提案は

  • 3つの状態に適した3つのUnicode文字。 ❓、✅、❌
  • プレーンテキスト入力フィールド（サイズ= 1）
  • 境界が無い
  • 読み取り専用
  • カーソルを表示しない
  • 3つの状態を切り替えるonclickハンドラー

以下の例を参照してください。

HTMLソース：

<input type='text' 
       style='border: none;' 
       onfocus='this.blur()' 
       readonly='true' 
       size='1' 
       value='&#x2753;' onclick='tristate_Marks(this)' />

またはインラインjavascriptとして：

<input style="border: none;"
       id="tristate" 
       type="text"  
       readonly="true" 
       size="1" 
       value="&#x2753;"  
       onclick="switch(this.form.tristate.value.charAt(0)) { 
         case '&#x2753': this.form.tristate.value='&#x2705;'; break;  
         case '&#x2705': this.form.tristate.value='&#x274C;'; break; 
         case '&#x274C': this.form.tristate.value='&#x2753;'; break; 
       };" />

Javascriptソースコード：

<script type="text/javascript" charset="utf-8">
  /**
   *  loops thru the given 3 values for the given control
   */
  function tristate(control, value1, value2, value3) {
    switch (control.value.charAt(0)) {
      case value1:
        control.value = value2;
      break;
      case value2:
        control.value = value3;
      break;
      case value3:
        control.value = value1;
      break;
      default:
        // display the current value if it's unexpected
        alert(control.value);
    }
  }
  function tristate_Marks(control) {
    tristate(control,'\u2753', '\u2705', '\u274C');
  }
  function tristate_Circles(control) {
    tristate(control,'\u25EF', '\u25CE', '\u25C9');
  }
  function tristate_Ballot(control) {
    tristate(control,'\u2610', '\u2611', '\u2612');
  }
  function tristate_Check(control) {
    tristate(control,'\u25A1', '\u2754', '\u2714');
  }

</script>
12
Wolfgang Fahl

不定状態を使用できます： http://css-tricks.com/indeterminate-checkboxes/ 。すぐに使えるブラウザでサポートされており、外部jsライブラリは必要ありません。

4
altso

最もセマンティックな方法は、チェックボックス入力が持つことができるreadonly属性を使用していると思います。 CSS、画像なしなど。ビルトインHTMLプロパティ！

フィドルを参照：
http://jsfiddle.net/chriscoyier/mGg85/2/

最後のトリックでここに説明されているように： http://css-tricks.com/indeterminate-checkboxes/

3
Webinan

ラジオグループを使用して、その機能を実現できます。

<input type="radio" name="choice" value="yes" />Yes
<input type="radio" name="choice" value="No" />No
<input type="radio" name="choice" value="null" />null
3
Franz

@Franzの回答のように、selectでそれを行うこともできます。例えば：

<select>
  <option></option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

これにより、フォームで送信される具体的な値を指定することもできます。javascriptの不確定バージョンのチェックボックスでは、チェックボックスの下線値を送信すると思います。

少なくとも、javascriptが無効になっている場合は、コールバックとして使用できます。たとえば、idを指定し、loadイベントで、ステータスが不確定のJavaScriptバージョンのチェックボックスに変更します。

2
PhoneixS

上記のすべてに加えて、役立つjQueryプラグインもあります。

個々のチェックボックスの場合：

ツリーのような動作のチェックボックスの場合：

EDIT両方のライブラリは、 'indeterminate'チェックボックス属性を使用します。 Html5のこの属性はスタイリングのためだけです（ https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state ）、null値サーバーに送信されることはありません（チェックボックスに指定できる値は2つだけです）。

この値をサーバーに送信できるように、JavaScriptを使用してフォームの送信時に入力される非表示の対応フィールドを作成しました。サーバー側では、もちろん、元のチェックボックスではなく、対応するフィールドをチェックする必要があります。

重要な最初のライブラリ（スタンドアロンチェックボックス）を使用しました。

  • チェック済み、未チェック、不定の値を初期化します
  • .val（）関数を使用して実際の値を取得します
  • .stateを動作させることはできません（おそらく私の間違い）

それが役に立てば幸いです。

2
Frank Sebastià

@BoltClock answer を参照すると、より複雑な再帰的メソッドのための私のソリューションがあります：

http://jsfiddle.net/gx7so2tq/2/

それは最もきれいな解決策ではないかもしれませんが、私にとってはうまく機能し、非常に柔軟です。

コンテナーを定義する2つのデータオブジェクトを使用します。

data-select-all="chapter1"

および要素自体：

data-select-some="chapter1"

両方とも同じ値を持ちます。 1つのチェックボックス内の両方のデータオブジェクトの組み合わせにより、サブレベルが許可され、再帰的にスキャンされます。したがって、変更トリガーを防ぐには、2つの「ヘルパー」関数が必要です。

1
MFH

https://github.com/supernifty/tristate-checkbox に簡単なJavaScriptトライステート入力フィールドの実装があります

0
Peter

HTMLフォーム要素を持つことは可能ですdisabled-そうではありませんか？ユーザーには、チェック、チェック解除、無効の3つの状態のいずれかで表示され、グレー表示されてクリックできません。私にとっては、それは「null」や「該当なし」、あるいはその3番目の状態で探しているものに似ています。

0
AmbroseChapel

偽造するにはjavascript/cssを使用する必要があります。

例については、こちらをお試しください： http://www.dynamicdrive.com/forums/archive/index.php/t-26322.html

0
Dan McGrath

チェックボックスプラグインを備えたjQueryプラグイン「jstree」はこれを行うことができます。

http://www.jstree.com/documentation/checkbox

-マット

0
Matt Frear