Question

我有多个输入的绑定。

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

由于还有其他方法可以启动输入更改，（jquery的.change（）方法），有没有办法判断是否实际点击了复选框以导致更改事件？

我尝试了焦点但是焦点事件在复选框的更改事件之前触发，因此不起作用。

$("#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.
});

编辑＃1

抱歉，我真的不知道如何进一步澄清......我不在乎是否选中了复选框...我知道.is（“：checked”）是什么以及如何使用它。这没有用。我只想知道是否实际点击了复选框以触发更改事件。

编辑＃2

我有一个解决方法......我首先绑定点击输入并选择并存储元素的id。然后在我的更改绑定中，我检查更改的元素是否与上次单击的元素相同。

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

然后在更改绑定中，我只检查当前ID是否等于最后点击的Id。

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

Answer 1

绑定到click而不是change。使用键盘更改复选框状态时，仍会触发click事件，但在这种情况下，event.pageX和event.pageY将为0，因此您可以写：

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

Answer 2

FrédéricHamidi回答很好。但是如果你想以编程方式提出事件“改变”，那么不幸的是，他的代码将不起作用。如果您真的想要您所描述的内容，请尝试以下版本：

$('#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

Answer 3

if（$（this）.is（'：checked'））....

if（$（this）.attr（'checked'））...

编辑：此外，如果所有复选框都是“家庭”，请确保只能通过为每个项目定义name = the-same-for-all-items和id =不同的项目来检查一个。

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));

Answer 4

你可以试试吗：

$("#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.
});

希望有所帮助

Answer 5

所以这就是我如何解决这个问题。我首先绑定输入的点击，然后选择并存储元素的id。然后在我的更改绑定中，我检查更改的元素是否与上次单击的元素相同。

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

然后在更改绑定中，我只检查当前ID是否等于最后点击的Id。

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

Answer 6

试试这个：

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

  or

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

如何判断是否实际点击了复选框？

6 个答案: