0

ラベルとチェックボックスを含むこのデータのテーブルがあります。

現在、プライマリ行のチェックボックスを同時にクリックするように設定されています。このテーブルには、プライマリ行ごとにサブ行もあり、同じラベルが同時にクリックされるサブ行に動作を追加する必要があります。例: プライマリ行 A の 1 番目のサブ行をチェックすると、プライマリ行 B の 1 番目のサブ行もチェックされます。

私が現在取り組んでいるテーブルは、ID とクラスに関しては同じように構成されています。

私が試していることの要約: サブ行のチェックボックスをクリックすると、下の同じサブ行のチェックボックスもチェックされます。

サブ行を配列に追加し、チェックボックスをクリックしたときに一致を特定するためにそれらをスキャンする必要がありますか? 誰かがこれにアプローチする方法について正しい方向に私を向けてもらえますか? ありがとう。

http://jsfiddle.net/c7EcH/

$(document).ready(function() {
    $("label:contains('PRIMARY ROW A')").closest('tr').attr('id', 'prime-row-a');
    $("label:contains('PRIMARY ROW B')").closest('tr').attr('id', 'prime-row-b');
    var primeRowA = $("label:contains('PRIMARY ROW A')").prev('input');
    var primeRowB = $("label:contains('PRIMARY ROW B')").prev('input');

    primeRowA.change(function(){
        primeRowB.attr('checked', $(this).is(':checked'));
    });
    primeRowB.change(function(){
        primeRowA.attr('checked', $(this).is(':checked'));
    });
});  

<table width="550" border="0" cellspacing="0" cellpadding="5">
 <tr>
   <td>
     <input type="checkbox">
     <label><span>PRIMARY ROW A</span></label></td>
 </tr>
 <tr>
   <td>
     <input type="checkbox">
     <label><span id="01">01 - SUB ROW A</span></label></td>
   </tr>
 <tr>
   <td>
    <input type="checkbox">
    <label><span id="02">02 - SUB ROW B</span></label></td>
 </tr>
 <tr>
   <td>
    <input type="checkbox">
    <label><span id="03">03 - SUB ROW C</span></label></td>
   </tr>
 <tr>
   <td>
    <input type="checkbox">
    <label><span>PRIMARY ROW B</span></label></td>
 </tr>
 <tr>
  <td>
    <input type="checkbox">
    <label><span id="01">01 - SUB ROW A</span></label></td>
 </tr>
 <tr>
  <td>
   <input type="checkbox">
   <label><span id="02">02 - SUB ROW B</span></label></td>
 </tr>
 <tr>
  <td>
   <input type="checkbox">
   <label><span id="03">03 - SUB ROW C</span></label></td>
 </tr>
</table>
4

2 に答える 2

1

まず、ID は一意である必要があるため、複数の要素に同じ ID を指定しないでください。

チェックボックスの各グループに同じクラスを割り当てることができ、1 つをクリックすると、他のすべてのチェックボックスの状態が同じクラスに設定されます。

$(document).ready(function() {
    $('input[type="checkbox"]').change(function () {
        var cls = $(this).attr('class');
        $('.' + cls).attr('checked', $(this).is(':checked'));
    });
});

http://jsfiddle.net/rdmond/PGLjg/

これにより、チェックしたばかりのボックスが実際に再チェックされますが、同じクラスの他のチェックボックスのみを変更するように微調整することは難しくありません。

于 2012-11-16T17:51:15.500 に答える
0

最初に一意の名前と ID を使用します。たとえば、フィールドに名前を付けることができます。inputたとえば、行 1 の場合です。

<label for="row1">ROW 1</label>
<input name = "row1" type = "checkbox" /> // row1
<input name = "subrow1a" type = "checkbox" /> // sub row of row1
// you can also use arrays of name i.e. like `name = subrow1[]`

行 2 の

<label for="row2">ROW 2</label>
<input name = "row2" type = "checkbox" /> // row 2
<input name = "subrow2a" type = "checkbox" /> // sub row of row2

onclick()第二に、必要なアクションを実行するために、チェック時に Jquery/JavaScript 関数を呼び出すこともできます。

于 2012-11-16T17:51:44.133 に答える