Question

check out this fiddle: http://jsfiddle.net/5rmEe/61/

    var inputVal = false;
    //allow user to deselect a radio button by clicking a checked radiobutton
    $('input[type=radio]').each(function(){
      var inputObj = $(this);
      inputObj.click(function(e){
        if(inputVal === inputObj.val()){
          inputVal = false;
          inputObj.attr('checked', false);
        }
        else{
          inputVal = inputObj.val();
          inputObj.attr('checked', 'checked');
        }
        e.stopPropagation();
      });
    });

$('.asdf').click(function(){
    $('.haha').trigger('click');
});

notice that the asdfsdaf span would trigger a click on the radio button

First of all, the radio button is set such that if you click on a checked radio button it will uncheck itself (try it out) and this works when clicking on the radio button itself

now If you click on the span, it’ll make the checkbox check itself properly but then if you click on the span again it will NOT set the radio button as unchecked even though evidently it performs a click event and theoretically it should uncheck the radio button accordingly due to the click event (this event works if you actually click on the radio button)

why is this happening? is the attr() method not working if the event is manually triggered using .trigger()?

how can I resolve this such that clicking on the span would ALSO trigger an uncheck in the radio button when the radio button is checked?

Answer 1

Use triggerHandler instead of trigger.

$('.haha').triggerHandler('click');

This will cause the handler to be fired without causing the default behavior of the click.