Question

<table class="data" border="1">
    <tbody>
        <tr>
        </tr>
            <td><input type="checkbox" /></td>

        <tr>
            <td><input type="checkbox" /></td>

        </tr>
        <tr>
            <td><input type="checkbox" /></td>
        </tr>        
    </tbody>
</table>

在迭代每个tr元素时，检查给定的<tr>元素是否有复选框，如果是，则添加新类。如果没有，请将其删除。

jQuery.fn.deleteMark = function() {

   this.each(function() {
        alert( $('input:checkbox',this) );
        if ($('checkbox',this).is(':checked')){
            $(this).addClass("delemarked");
        }
        else{
            $(this).removeClass("delemarked");
        }
   })
};

现在我想为每个被检查的tr添加一个类：

function refresh(){
    $('.data tbody tr').each(function() {
        $(this).deleteMark();
    });        
}

可悲的是，这对我不起作用。我将不胜感激任何帮助。

Answer 1

而不是checkbox，您需要:checkbox作为选择器，因为没有<checkbox>元素，如下所示：

$(':checkbox',this)

虽然您可以使用.toggleClass("className", bool)缩短整体方法，但是：

jQuery.fn.deleteMark = function() {
  return this.each(function() {
    $(this).toggleClass("delemarked", $(this).find(":checkbox:checked").length > 0);
  });
};

此外，.each()无需调用您的插件，只需执行以下操作：

$('.data tbody tr').deleteMark();

You can test all of the change above here

Answer 2

您的示例包含：$('checkbox',this)

它不起作用的原因是你引用checkbox就好像它是一个元素名称，它不是。

相反，您需要使用[type=checkbox]或:checkbox（这两个完全相同）

所以你的代码看起来像这样：

if ($('[type=checkbox]',this).is(':checked'))

或者这个：

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

有关详细信息，请参阅the checkbox selector JQuery manual page。

希望有所帮助。

Answer 3

你真的不需要插件：

$('.data tbody tr:has(:checkbox:checked)').addClass("delemarked");
$('.data tbody tr:has(:checkbox:not(:checked))').removeClass("delemarked");

或（视您的口味而定）

$('.data tbody tr:has(:checkbox)').removeClass("delemarked").has(':checkbox:checked').addClass('delemarked');

编写一个新的jQuery插件

3 个答案: