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>

可能有多行，其中行代表一个特定的家庭。见上面，有 2 个家族，TestName 和 TestName 2。每个家族的每一行都可以有一个或多个复选框。

脚本代码：

<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 个。你能建议什么是错的......

Answer 1

HTML 页面中的ID是唯一的..

因此，当您尝试选择 Multiple id's 时，因为 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>​

Answer 2

我在 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>