如何在每个表行中单击a-tag时选中复选框?

时间:2016-07-19 22:24:27

标签: javascript jquery

我正在使用旧版本的jquery。我当前的代码只适用于我表格的第一行。如果我将它切换到类而不是ID,它会检查每一行。我需要它在每一行上单独工作。

Jquery代码:

$('#enableCheckbox').click(function(){
    $('#checkbox').attr("checked", true);
})

HTML:

<td><a href="pdfview.cfm?id=#hardwareid#" target="_blank" id="enableCheckbox">Create</a></td>
<td><input type="checkbox" name="checkbox" id="checkbox"></td>

2 个答案:

答案 0 :(得分:1)

您想要检查每个标记点击的复选框,这样就不会为标记提供ID,因为它只能用于第一个ID。

请参阅以下代码,我认为它会对您有所帮助。

&#13;
&#13;
$(document).ready(function(){
$("table tr td a").click(function (e) {
          $(this).parent().next().find('input').attr("checked", true);
  //If you want to check and uncheck on click then follow below code
  //$(this).parent().next().find('input').attr("checked", !$(this).parent().next().find('input').attr("checked"));
    });
  });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<table>
  <tr>
    <td><a href="#" target="_blank">Create</a></td>
<td><input type="checkbox" name="checkbox" id="checkbox"></td>
    </tr>
  <tr>
    <td><a href="#" target="_blank">Create</a></td>
<td><input type="checkbox" name="checkbox" id="checkbox"></td>
    </tr>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

ids在表上必须是唯一的,因此您不能对表的每一行使用相同的id,因为大多数浏览器只返回具有id的第一个元素。 (这就是你只获得表格第一行的原因)。

您可以做的是,您可以为您提到的类设置事件侦听器,但也为表行提供唯一的数据元素。

或者,如果您在后续表格单元格中没有其他输入,则可以使用以下代码:

$('.enableCheckbox').on("click", function(event){
   var $input = $(event.target).parent().find("input");
   $input.prop("checked", true);
});