JQuery检查表行中的多个复选框

时间：2012-10-11 23:12:40

标签： jquery checkbox

我的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.每行可以有一个或多个复选框。

脚本代码：

<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.你能否说明错误...

2 个答案:

答案 0 :(得分：1)

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'))

<强> CHECK FIDDLE

<强> EDITED

这是在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>​

答案 1 :(得分：0)

我在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');
});

相关问题
最新问题