jquery - JQueryは、テーブル行内の複数のチェックボックスをチェックします

Question

私は以下のようなHTMLを持っています:

<tr class="gridSubHeader1">
<td colspan="6"><input type="checkbox" familyname="TestName" onclick="javascript: HandleClick('TestName');">EB - Autonomy</td>
</tr>
<tr class="gridSubHeader1" rowID="1000748" id="TestName">
<td class="formBodyOddRow" width="20">1&nbsp;</td>
<td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="1000749" id="TestName">
<td class="formBodyEvenRow" width="20">2&nbsp;</td>
<td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="1000750" id="TestName">
<td class="formBodyOddRow" width="20">3&nbsp;</td>
<td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="237" id="TestName">
<td class="formBodyEvenRow" width="20">4&nbsp;</td>
<td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>

<tr class="gridSubHeader1">
<td colspan="6"><input type="checkbox" familyname="TestName2" onclick="javascript: HandleClick('TestName2');">EB - Another</td>
</tr>
<tr class="gridSubHeader1" rowID="1000748" id="TestName2">
<td class="formBodyOddRow" width="20">1&nbsp;</td>
<td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="1000749" id="TestName2">
<td class="formBodyEvenRow" width="20">2&nbsp;</td>
<td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="1000750" id="TestName2">
<td class="formBodyOddRow" width="20">3&nbsp;</td>
<td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="237" id="TestName2">
<td class="formBodyEvenRow" width="20">4&nbsp;</td>
<td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked=""></td>
</tr>

複数の行が存在する可能性があり、行は特定のファミリを表します。上記を参照してください。TestName と TestName 2 の 2 つのファミリがあります。各ファミリには、各行に 1 つ以上のチェックボックスを含めることができます。

スクリプトコード:

<script language="javascript" type="text/javascript">
    function HandleClick(elementName) {
         if ($("input[familyname='" + elementName + "']").is(':checked')) {
            $("#" + elementName).each(function () {
                $(this).find('input', 'checkbox').attr('checked', true);
            });
        }
        else {
            $("#" + elementName).each(function () {
                $(this).find('input', 'checkbox').attr('checked', false);
            });
        }
    }
</script>

4つすべてを選択するのではなく、最初のチェックボックスのみを選択しているようです。何が間違っているのか教えてください...

score 1 · Accepted Answer

HTML ページのIDは一意です。

したがって、複数の ID を選択しようとすると、ID が一意であるため、最初の ID 要素に遭遇した後に検索が停止します。これが、最初の ID 要素のみがチェックされる理由です。

したがって、セレクターを変更する必要があります..また、これを機能させるために $.each イテレーターは必要ありません..これを試してください

$(this).closest('tr').nextAll('tr').find('input').prop('checked', true);

このコードを試してください ..JS

var elementName = 'TestName' ;
$('input[familyname="TestName"]').on('click', function() {
    if ($("input[familyname='" + elementName + "']").is(':checked')) {
        $(this).closest('tr').nextAll('tr').find('input').prop('checked', true);

    }
    else {
        $(this).closest('tr').nextAll('tr').find('input').prop('checked', false);
    }
});

HTML

<table>
   <tr class="gridSubHeader1">
      <td colspan="6"><input type="checkbox" familyname="TestName" />EB - Autonomy</td>
   </tr>
   <tr class="gridSubHeader1" rowID="1000748">
      <td class="formBodyOddRow" width="20">1&nbsp;</td>
      <td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
   <tr class="gridSubHeader1" rowID="1000749">
      <td class="formBodyEvenRow" width="20">2&nbsp;</td>
      <td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
   <tr class="gridSubHeader1" rowID="1000750">
      <td class="formBodyOddRow" width="20">3&nbsp;</td>
      <td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
   <tr class="gridSubHeader1" rowID="237">
      <td class="formBodyEvenRow" width="20">4&nbsp;</td>
      <td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
</table>

I have removed the ID from your table. それらがページ上で一意であることを確認してください

また、この行は

if ($("input[familyname='" + elementName + "']").is(':checked'))

// 交換された

if ($(this).is(':checked'))

フィドルをチェック

編集済み

これは、HTML 自体で定義された eventHandler を含むコードです。

<table>
   <tr class="gridSubHeader1">
      <td colspan="6"><input type="checkbox" familyname="TestName" onclick="javascript:HandleClick('TestName');" />EB - Autonomy</td>
   </tr>
   <tr class="gridSubHeader1" rowID="1000748">
      <td class="formBodyOddRow" width="20">1&nbsp;</td>
      <td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
   <tr class="gridSubHeader1" rowID="1000749">
      <td class="formBodyEvenRow" width="20">2&nbsp;</td>
      <td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
   <tr class="gridSubHeader1" rowID="1000750">
      <td class="formBodyOddRow" width="20">3&nbsp;</td>
      <td class="formBodyOddRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
   <tr class="gridSubHeader1" rowID="237">
      <td class="formBodyEvenRow" width="20">4&nbsp;</td>
      <td class="formBodyEvenRow" width="30"><input type="Checkbox" id="Select" name="Select" unchecked="" /></td>
   </tr>
</table>
<script language="javascript" type="text/javascript">
   function HandleClick(elementName) {
       var $checkBox = $("input[familyname='" + elementName + "']") ;
       if ($checkBox.is(':checked')) {
            $checkBox.closest('tr').nextAll('tr').find('input').prop('checked', true);
       }
       else {
          $checkBox.closest('tr').nextAll('tr').find('input').prop('checked', false);
       }
   }
</script>

score 0 · Accepted Answer

jsfiddle で再作成しました: http://jsfiddle.net/bjoshuanoah/Rsasf/

複数回使用されるものについては、id をクラスに置き換えます。

ああ、絶対に必要でない限り、テーブルにコーディングしないでください.... 8\

これは機能します：

<tr class="gridSubHeader1">
<td colspan="6"><input type="checkbox" familyname="TestName">EB - Autonomy</td>
</tr>
<tr class="gridSubHeader1" rowID="1000748" id="TestName">
<td class="formBodyOddRow" width="20">1&nbsp;</td>
<td class="formBodyOddRow" width="30"><input type="Checkbox" class="TestName" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="1000749" id="TestName">
<td class="formBodyEvenRow" width="20">2&nbsp;</td>
<td class="formBodyEvenRow" width="30"><input type="Checkbox" class="TestName" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="1000750" id="TestName">
<td class="formBodyOddRow" width="20">3&nbsp;</td>
<td class="formBodyOddRow" width="30"><input type="Checkbox" class="TestName" name="Select" unchecked=""></td>
</tr>
<tr class="gridSubHeader1" rowID="237" id="TestName">
<td class="formBodyEvenRow" width="20">4&nbsp;</td>
<td class="formBodyEvenRow" width="30"><input type="Checkbox" class="TestName" name="Select" unchecked=""></td>
</tr>

JS の場合:

var handleClick = function(elementName) {
         if ($("input[familyname='" + elementName + "']").is(':checked')) {
            $("input." + elementName).each(function () {
                $(this).attr('checked', true);
            });
        }
        else {
            $("input." + elementName).each(function () {
                 console.log('tr'); 
                $(this).attr('checked', false);
            });
        }
}

$('input[familyname="TestName"]').click(function(){
    handleClick('TestName');
});

</p>

jquery - JQueryは、テーブル行内の複数のチェックボックスをチェックします

2 に答える 2

Related

Reference