jQuery Checkboxes in Safari

Question

Hi Guys,

I am trying to add a class when a checkbox is "checked" in Safari and remove it when it is unchecked [in other browsers I am using.bind("focus", function() { but in Safari it doesnt work?]

I am currently using

jQuery('.top_class input').bind("focus", function(){
jQuery(this).parents('.row').addClass("add_over"); 
   })
            .bind("blur", function() { 
jQuery(this).parents('.row').removeClass("add_over"); 
   });

This doesnt work in Safari - how to get the code to work in safari ?

Answer 1

If you are working with a traditional input[type=checkbox] then I think you are looking for the click event, something like this:

jQuery('.top_class').click(function(){
    jQuery(this).closest('.row').toggleClass("add_over", jQuery(this).is(':checked') );
});

To be clear, this will work if this is your checkbox HTML (more or less):

<input type="checkbox" class="top_class" name="whatever" />

UPDATE: Safari may or may not accept focus on a checkbox depending on settings. Since there is no way to test this, I would handle it this way:

var $rows = jQuery('.row'); // Cache all rows
jQuery('.top_class').click(function(){
    var $row = jQuery(this).closest('.row');
    $rows.filter(".add_over").not($row).removeClass("add_over"); // Remove class from other rows
    $row.addClass('add_over');
});

That should do what you want. You can see a DEMO of it working in Safari here: http://jsbin.com/ohuxe/

Answer 2

Have you tried using .bind("click") and checking the checked attribute?

jQuery("input.top_class").bind(
     "click", 
      function() { alert(jQuery(this).attr("checked")) }
     )