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

HTMLにトライステートチェックボタン（はい、いいえ、null）を設定する方法はありませんよね？

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

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

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

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

element.indeterminate = true;

ここでヤヌスTroelsenのフィドルが。ただし、次のことに注意してください。

• indeterminate状態は、HTMLマークアップに設定することができない、それだけで（この参照Javascriptを介して行うことができるJSfiddleテストし、このCSSのトリックで詳細な記事を）

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

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

前の答え

別の代替案は、「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/

お役に立てば幸いです。

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

私の提案は

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

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

• http://jsfiddle.net/wf_bitplan_com/941std72/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');
}

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

<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; 
       };" />  

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

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

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

最もセマンティックな方法はreadonly、チェックボックス入力が持つことができる属性を使用することだと思います。CSS、画像などはありません。組み込みのHTMLプロパティ！

Fiddleを参照してください： http :
//jsfiddle.net/chriscoyier/mGg85/2/

ここで最後のトリックで説明したように：http : //css-tricks.com/indeterminate-checkboxes/

上記のindeterminate属性を使用した実行可能な例を次に示します。

const indeterminates = document.getElementsByClassName('indeterminate');
indeterminates['0'].indeterminate  = true;

<form>
  <div>
    <input type="checkbox" checked="checked" />True
  </div>
  <div>
    <input type="checkbox" />False
  </div>
  <div>
    <input type="checkbox" class="indeterminate" />Indeterminate
  </div>
</form>

コードスニペットを実行して、どのように見えるかを確認してください。

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

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

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

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

上記のすべてに加えて、以下のjQueryプラグインも役立ちます。

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

• jQuery-Tristate-Checkbox-plugin：http : //vanderlee.github.io/tristate/

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

• jQuery Tristate：http : //jlbruno.github.io/jQuery-Tristate-Checkbox-plugin/

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

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

最初のライブラリ（スタンドアロンのチェックボックス）を使用しましたが、次のことが重要です。

• チェック済み、チェックなし、不確定の値を初期化する
• .val（）関数を使用して実際の値を取得する
• 作業状態を作成できません（おそらく私の間違い）

お役に立てば幸いです。

単純なjQueryとプロパティを使用した他の例data-checked：

 $("#checkbox")
  .click(function(e) {
    var el = $(this);

    switch (el.data('checked')) {

      // unchecked, going indeterminate
      case 0:
        el.data('checked', 1);
        el.prop('indeterminate', true);
        break;

        // indeterminate, going checked
      case 1:
        el.data('checked', 2);
        el.prop('indeterminate', false);
        el.prop('checked', true);
        break;

        // checked, going unchecked
      default:
        el.data('checked', 0);
        el.prop('indeterminate', false);
        el.prop('checked', false);

    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="checkbox" value="" checked id="checkbox"> Tri-State Checkbox </label>

@BoltClock answerを参照して、より複雑な再帰的方法の解決策を次に示します。

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

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

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

data-select-all="chapter1"

そして要素自体：

data-select-some="chapter1"

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

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

例としてここを試してください：http : //www.dynamicdrive.com/forums/archive/index.php/t-26322.html

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

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

これは、チェックボックスプラグインを含むjQueryプラグイン「jstree」で実行できます。

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

-マット