CODEWITHSUNDEEP
javascriptjquery
kasdega
kasdega

Reputation: 18786

How can I tell if a checkbox was actually clicked?

I've got a binding for multiple inputs.

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("change", function() {
   // do something here
   // do something extra here if $(this) was actually clicked
});

Since there are other ways of initiating a change of an input, (jquery's .change() method for one), Is there a way to tell if a checkbox was actually clicked to cause the change event?

I tried focus however the focus event fires before a checkbox's change event so that doesn't work.

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("change", function() {
   // do something here
   if($(this).is(":focus")) // do something extra here but focus doesn't happen here for checkboxes.
});

Edit #1

Sorry I don't really know how to clarify this further...I don't care if the checkbox is checked or not...I know what .is(":checked") is and how to use it. It doesn't help here. I only want to know if the checkbox was actually clicked in to trigger the change event.

Edit #2

I have a work around...I first bind clicks for inputs and selects and store the id of the element. Then in my change binding I check to see if the element that changed is the same element that was last clicked.

$("input, select").click(function() {
    var myId = $(this).attr("id");
    lastClickedStore.lastClicked = myId;
});

Then in the change binding I just check if the current ID equals the last clicked Id.

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("change", function() {
   // do something
   if(lastClickedStore.lastClicked == $(this).attr("id")) // do something else.
}

Upvotes: 5

Views: 263

Answers (6)

kasdega
kasdega

Reputation: 18786

So here is how I solved this problem. I first bind clicks for inputs and selects and store the id of the element. Then in my change binding I check to see if the element that changed is the same element that was last clicked.

$("input, select").click(function() {
    var myId = $(this).attr("id");
    lastClickedStore.lastClicked = myId;
});

Then in the change binding I just check if the current ID equals the last clicked Id.

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("change", function() {
   // do something
   if(lastClickedStore.lastClicked == $(this).attr("id")) // do something else.
}

Upvotes: 0

Microfed
Microfed

Reputation: 2890

Frédéric Hamidi answer is good. But if you want to raise an event 'change' programmatically, then his code is, unfortunately, will not work. If you really want what you described, try this version:

$('#foo, #bar').bind({
    click: function () {
        alert('click ' + this.id);
        if ($(this).hasClass('changed')) {
            alert('click+change ' + this.id);
            $(this).removeClass('changed');
        }
    },
    change: function () {
        alert('change ' + this.id);
        $(this).addClass('changed');
    }
});

Demo.

Upvotes: 1

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

Try this:

<input type="checkbox" onClick="doSomething()">

  or

$("#foo","#bar","#fooCheckbox","#barCheckBox").click(function(){
    doSomething();
});

Upvotes: -1

zequinha-bsb
zequinha-bsb

Reputation: 719

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

if ($(this).attr('checked')) ...

EDIT: also, if all the checkboxes are for a "family", make sure only one can be checked by defining name=the-same-for-all-items and id=different ones for each item.

Ex:

<input type='checkbox' name='fruits' id='orange' >orange
<input type='checkbox' name='fruits' id='melon' >melon
<input type='checkbox' name='fruits' id='banana' >banana
<input type='checkbox' name='fruits' id='apple' >apple   
<input type='checkbox' name='fruits' id='...' >....

EDIT: if it was clicked: the id?

console.log($(this.id));

Upvotes: 0

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262979

Bind to click instead of change. The click event will still be triggered when the check box's state is changed with the keyboard, but event.pageX and event.pageY will be 0 in that case, so you can write:

$("#foo, #bar, #fooCheckbox, #barCheckBox").click(function(event) {
    // Do something here...
    if (event.pageX > 0) {
        // Check box was clicked, do something extra here...
    }
});

Upvotes: 10

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Can you try doing:

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("click", function() {
   // do something here
   if($(this).is(":checked")) // do something extra here but focus doesn't happen here for checkboxes.
});

Hope it helps

Upvotes: 0

Related Questions