3

私はいくつかの行を持つ2つのテーブルを持つフォームを持っています。 ここに画像の説明を入力

そのチェックボックスの下のチェックボックスよりもすべてのチェックボックスを選択/選択解除をクリックすると、その特定のテーブルをチェックする必要があります

機能するJavaScript関数がありますが、2つのチェックボックスのいずれかをクリックすると、両方のテーブルのチェックボックスがチェックされます。特定のテーブルのみのすべてのチェックボックスをオンにしたい。

Javascript:

<script type="text/javascript">
checked=false;
function checkedAll (frm1) {
    var aa= document.getElementById('frm1');
     if (checked == false)
          {
           checked = true
          }
        else
          {
          checked = false
          }
    for (var i =0; i < aa.elements.length; i++) 
    {
     aa.elements[i].checked = checked;
    }
      }

      //function for subscription month


</script>

私のhtmlは....

<form action="" method="post" name="frm1" id="frm1">

<table>
<tr><th>Cause List</th></tr>
<?php 
foreach($arr as $month)
{
?>
<tr><td><input type="checkbox" name="causelist_month" /><?php echo $month; ?></td></tr>
<?php } ?>
<tr><th><input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll (frm1);"/>select all/unselect all</th></tr>
</table>
<table>
<tr><th>Subscription</th></tr>
<?php 
foreach($arr as $month)
{
?>
<tr><td><input type="checkbox" name="subscription_month"/><?php echo $month; ?></td></tr>
<?php } ?>
<tr><th><input type="checkbox" name="subscription_month" id="subscription_month" onclick="checkedAll2 (frm2);"/>select all/unselect all</th></tr>
</table>
</form>

私を助けてください。

4

6 に答える 6

1

jQuery 1.6以降では、次のことができます

$('.check-all').click(function () {
    var checked = this.prop('checked');   
    this.closest('table').find(':checkbox').prop('checked', checked);
}

whereは、2 つの「すべて選択/選択解除」チェックボックスが持つcheck-allクラスです。

于 2013-07-23T06:14:46.530 に答える
1

コードにはいくつかの問題があります。最も重要なことは、両方のフォームの状態を追跡する単一のチェック済み変数であることです。それはうまくいきません。代わりに、他のチェックボックスには「checkall」チェックボックスのステータスを使用してください。

実際に 2 つのフォームがあると仮定します (2 つのフォームを使用できない場合は、以下を参照してください)。

<form action="" method="post" name="frm1" id="frm1">
    <table>    
        <tr><th>Cause List</th></tr>
        <!-- ... -->
        <tr>
            <th>
                <input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll.call(this);"/>select all/unselect all
            </th>
        </tr>  
    </table>
</form>

<form action="" method="post" name="frm2" id="frm2">
    <table>    
        <tr><th>Subscription List</th></tr>
        <!-- ... -->
        <tr>
            <th>
                <input type="checkbox" name="subscription_month" id="subscription_month" onclick="checkedAll.call(this);"/>select all/unselect all
            </th>
        </tr>  
    </table>
</form>

インライン イベント ハンドラを に変更したことに注意してくださいcheckedAll.call(this)。

次に、関数は次のようになります。

function checkedAll() {
    // this refers to the clicked checkbox
    // find all checkboxes inside the checkbox' form
    var elements = this.form.getElementsByTagName('input');
    // iterate and change status
    for (var i = elements.length; i--; ) {
        if (elements[i].type == 'checkbox') {
            elements[i].checked = this.checked;
        }
    }
}

デモ

もちろん、コードを改善する方法はあります。たとえば、テーブル内の他のチェックボックスが選択解除されている場合に、それぞれの「すべて選択」チェックボックスを選択解除するロジックを追加する必要があります。

また、quirksmode.org のイベント処理の優れた紹介を読んで、イベント ハンドラーをバインドする他の方法について学ぶことをお勧めします。

2 つのフォームを使用できない場合は、基準点として別の先祖を見つける必要があります (つまり、そこからすべてのチェックボックスを選択します)。この場合、table要素は好ましいようです。ドキュメントが見つかるまで、ドキュメントをたどる必要があります。checkedAll.call(this)これを機能させるには、インライン クリック イベント ハンドラを次のように変更する必要があります。

function checkedAll() {
    // this refers to the clicked checkbox

    // find closest table
    var parent = this.parentNode;
    do {
        parent = parent.parentNode;
    } while(parent.nodeName !== 'TABLE');

    // find all checkboxes inside the checkbox' table
    var elements = parent.getElementsByTagName('input');

    // ... continue like shown above
}
于 2013-07-23T06:37:15.420 に答える
0

あなたのコードは、内部にあるすべてのチェックボックスを変更していますfrm1。2 つの別個の div 内に 2 つのテーブルを保持し、対応する div id をcheckedAllfunction に渡します。 

<form action="" method="post" name="frm1" id="frm1"> 
<div id="div1">
<table>  
   <tr>
         <th>Cause List</th>
  </tr>
  <?php foreach($arr as $month) { ?> 
   <tr><td><input type="checkbox" name="causelist_month" />
   <?php echo $month; ?></td></tr> 
   <?php } ?> 
   <tr>
   <th>
    <input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll (div1);"/>select all/unselect all</th></tr> </table>  
   </div>
   <div id="div2">
   // Second table
   </div>  
  </form>
于 2013-07-23T06:15:53.167 に答える
0

このデモを試す

var checked=false;
function checkedAll () {
var aa =  document.getElementsByName("causelist_month");
checked = document.getElementById('causelist_month').checked;

for (var i =0; i < aa.length; i++) 
{
    aa[i].checked = checked;
}
}

function checkedAll2() {
var aa =  document.getElementsByName("subscription_month");
checked = document.getElementById('subscription_month').checked;


for (var i =0; i < aa.length; i++) 
{
    aa[i].checked = checked;
}
}
于 2013-07-23T07:07:22.643 に答える