0

多くのチェックボックスを含むテーブルを作成しましたが、「ユニバーサル」チェックボックスを使用できるようにしたいと考えています。

このような：

<tr>
      <th scope="row">Indice</th>
      <td><input type="checkbox" id="check1"></td>
      <td><input type="checkbox" id="check2"></td>
      <td><input type="checkbox" id="check3"></td>
      <td><button onclick="check()">Check Checkbox</button>
          <button onclick="uncheck()">Uncheck Checkbox</button></td>  
</tr>

さて、私はjavascriptでこれを行いました:

<script>
function check()
  {
  document.getElementById("check1").checked=true
  document.getElementById("check2").checked=true
  document.getElementById("check3").checked=true
  }
function uncheck()
  {
  document.getElementById("check1").checked=false
  document.getElementById("check2").checked=false
  document.getElementById("check3").checked=false
  }
function selectAll(frmElement, chkElement) {
    // ...
}
document.getElementById("check_all_1").onclick = function() {
    selectAll(document.wizard_form, this);
}
</script>

これまでのところは良いです...しかし...アイデアはデータベースからいくつかの結果を得ることであり、変更はありません。私はこのjavascript「check3」、「check4」を行っています...どうすればいいですか

4

5 に答える 5

2

これを試して

<table>
<tr>
    <th scope="row">
        <input type="checkbox" id="checkAll" onclick="javascript: return CheckAllCheckboxes(this); ">
    </th>
    <tr>
        <td>
            <input type="checkbox" id="check1">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="check2">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="check3">
        </td>
    </tr>

JS

CheckAllCheckboxes = function (current) {
   var state = $(current).is(':checked');
   $('input[type="checkbox"]').each(function () {
      $(this).attr('checked', state);
   });
};

フィドルのデモを確認できます

別のオプション

jQueryクリックイベントあり

$(':checkbox').not('#checkAll').change(function () {
    $("#checkAll").attr("checked", $(":checkbox").not(":checked").not("#checkAll").length ? false : true);
});
$("#checkAll").change(function () {
    $(':checkbox').attr('checked', this.checked);
});

フィドルのデモを確認できます

于 2013-07-08T13:38:50.673 に答える
1

シンプルなプレーン JavaScript (ライブラリ不要) バージョン:

function checks (){
    var button = this.className.indexOf('uncheckAll') === -1,
        row = this.parentNode.parentNode,
        inputs = row.getElementsByTagName('input');

    for (var i = 0, len = inputs.length; i < len; i++) {
        if (inputs[i].type == 'checkbox') {
            inputs[i].checked = button;
        }
    }

}

var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].addEventListener('click', checks);
}

JS フィドルのデモ。

parentNode.parentNode(単純な) closest()shimを使用して、DOM を明示的にトラバースする必要がないように上記を修正しました (シーケンシャルを使用するには、HTML 構造の事前知識が必要です)。

HTMLElement.prototype.closest = function (tagName) {
    tagName = tagName.toLowerCase();
    var self = this,
        selfTag = self.tagName.toLowerCase();
    return selfTag == tagName ? self : self.parentNode.closest(tagName);
}

function checks (){
    var button = this.className.indexOf('uncheckAll') === -1,
        row = this.closest('tr'),
        inputs = row.getElementsByTagName('input');

    for (var i = 0, len = inputs.length; i < len; i++) {
        if (inputs[i].type == 'checkbox') {
            inputs[i].checked = button;
        }
    }

}

var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].addEventListener('click', checks);
}

JS フィドルのデモ。

参考文献:

于 2013-07-08T13:50:03.217 に答える
0

結果がデータベースからのものである場合、データベースの結果をループしてページにチェックボックスを追加するときに...

<td><input type="checkbox" checked /></td>

また、必ずスラッシュでタグを終了してください。

于 2013-07-08T13:37:07.803 に答える