Writing a new jQuery plugin

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>

While iterating through each tr element, check whether the given <tr> element has a checked checkbox, if so add the new class. If not, remove it.

jQuery.fn.deleteMark = function() {

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

Now I want to add a class to each tr that is checked:

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

Sadly this doesn't work for me. I will be grateful for any help.

Answer 1

Instead of checkbox, you need :checkbox for a selector, as there are no <checkbox> elements, like this:

$(':checkbox',this)

Though you can shorten your overall approach with .toggleClass("className", bool), like this:

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

Also, there's no need for the .each() calling your plugin, just this will do:

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

You can test all of the change above here.