0

h:table(単純な html テーブル) のすべてのチェック ボックスをすべてオンにする JavaScript メソッドを呼び出すボタンを作成する方法に興味がありますか? また、JavaScript メソッドを使用して、すべてのチェック ボックスをテーブルに再度オフにする方法を教えてください。切り取ったコードや実際の例を教えてください。

4

4 に答える 4

6
  1. ボタンを作成する
  2. ボタンにイベント リスナーを追加します。リスナーで、次のようにします。
    1. すべてのボックスにチェックを入れたいテーブル要素を、IDなどで選択します
    2. getElementsByTagName入力要素に使用
    3. 入力のリストをループします。
      • 入力のタイプが「チェックボックス」の場合、そのcheckedプロパティをtrue
于 2012-05-21T21:19:13.267 に答える
2 
<h:table>
    <input type="checkbox" />
    <input type="checkbox" />
</h:table>

<script>
    function checkBoxesForMe( checkBoxesOn )
    {
        var table = document.getElementsByTagName( 'h:table' )[ 0 ]
        var inputs = table.getElementsByTagName( 'input' )

        for( var i = 0; i < inputs.length; i ++ )
        {
            if( inputs[ i ].type == 'checkbox' ) 
            {
                if( checkBoxesOn )
                    inputs[ i ].setAttribute( 'checked', true )
                else
                    inputs[ i ].removeAttribute( 'checked' )
            }
        }
    }
</script>
于 2012-05-21T21:19:06.977 に答える
2

次の関数は自明です。

function checkboxesCheckAll() {
  var boxes = document.getElementsByTagName('input');
  var i = boxes.length;
  while (i--) {
    if (boxes[i].type == 'checkbox') boxes[i].checked = true;
  }
}

function checkboxesCheckNone() {
  var boxes = document.getElementsByTagName('input');
  var i = boxes.length;
  while (i--) {
    if (boxes[i].type == 'checkbox') boxes[i].checked = false;
  }
}

function checkboxesCheckToggle() {
  var boxes = document.getElementsByTagName('input');
  var i = boxes.length;
  while (i--) {
    if (boxes[i].type == 'checkbox') boxes[i].checked = !boxes[i].checked;
  }
}

または、1 つの関数として記述し、パラメーターを渡してチェック、チェック解除、またはトグルすることもできます。

于 2012-05-21T23:58:04.330 に答える
1

これは、jQuery を使用して非常に簡単に行うことができます。

すべて調べる

$("[type=checkbox]").prop("checked", true);

すべてのチェックを外します:

$("[type=checkbox]").prop("checked", false);

だからボタンで：

<input type="checkbox" name="a">a<br/>
<input type="checkbox" name="b">b<br/>
<input type="checkbox" name="c">c<br/>
<input type="checkbox" name="d">d<br/>
<input type="checkbox" name="e">e<br/>
<button data-action="check">Check All</button>
<button data-action="uncheck">Uncheck All</button>​

$('button').click(function() {
    $("[type=checkbox]").prop("checked", $(this).data('action') === 'check');
})​

フィドル: http://jsfiddle.net/Bn386/

于 2012-05-21T21:17:01.967 に答える