檢查複選框的更改事件

如何使用jQuery捕獲/取消選中<input type="checkbox" />事件？檢查複選框的更改事件

2009-09-21 omg

如果您正在使用JQuery的一個相對較新的版本，我會用的。對（「變」，函數（）{...}），如提及@Daniel De Leon的答案在下面。一個優點是，「on」事件監聽器將綁定到動態生成的html。 – BLang 2018-03-08 14:31:47

127

<input type="checkbox" id="something" /> 

$("#something").click(function(){ 
    if($(this).is(':checked')) alert("checked"); 
});

編輯：這樣做時複選框其他原因比點擊變化，比如使用鍵盤不會趕上。爲避免此問題，請收聽change而不是click。

爲了檢查/編程取消選中，看看Why isn't my checkbox change event triggered?

來源

2009-09-21 15:50:11 marcgg

document.getElementById（'something'）。checked works，why $（'＃something'）。checked不行？ – omg 2009-09-21 15:52:45

你的代碼缺少一個paran，並且確實應該使用獲取檢查狀態的jQuery方法。 – 2009-09-21 15:53:16

因爲$（'＃something'）返回一個jQuery對象而不是ElementNode – 2009-09-21 15:53:45

使用最好的兼容性click事件與MSIE

$(document).ready(function() { 
    $("input[type=checkbox]").click(function() { 
     alert("state changed"); 
    }); 
});

來源

2009-09-21 15:48:23

如何判斷它是否被檢查？ – omg 2009-09-21 15:50:06

我需要知道點擊是否意味着檢查或取消選中它。 – omg 2009-09-21 15:50:56

然後，您可以使用$（this）.is（'：checked'）來測試剛剛單擊的項目的狀態 – 2009-09-21 15:52:23

使用:checked選擇確定複選框的狀態：

$('input[type=checkbox]').click(function() { 
    if($(this).is(':checked')) { 
     ... 
    } else { 
     ... 
    } 
});

來源

2009-09-21 15:51:10 karim79

需要另一個括號在您的條件... if（$（this）... – 2009-09-21 15:55:11

@Ty W - 謝謝，修正 – karim79 2009-09-21 15:59:16

-2

$(document).ready(function(){ 
    checkUncheckAll("#select_all","[name='check_boxes[]']"); 
}); 

var NUM_BOXES = 10; 
// last checkbox the user clicked 
var last = -1; 
function check(event) { 
    // in IE, the event object is a property of the window object 
    // in Mozilla, event object is passed to event handlers as a parameter 
    event = event || window.event; 

    var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]); 
    if (event.shiftKey && last != -1) { 
    var di = num > last ? 1 : -1; 
    for (var i = last; i != num; i += di) 
     document.forms.boxes['box[' + i + ']'].checked = true; 
    } 
    last = num; 
} 
function init() { 
    for (var i = 0; i < NUM_BOXES; i++) 
    document.forms.boxes['box[' + i + ']'].onclick = check; 
}

HTML：

<body onload="init()"> 
    <form name="boxes"> 
    <input name="box[0]" type="checkbox"> 
    <input name="box[1]" type="checkbox"> 
    <input name="box[2]" type="checkbox"> 
    <input name="box[3]" type="checkbox"> 
    <input name="box[4]" type="checkbox"> 
    <input name="box[5]" type="checkbox"> 
    <input name="box[6]" type="checkbox"> 
    <input name="box[7]" type="checkbox"> 
    <input name="box[8]" type="checkbox"> 
    <input name="box[9]" type="checkbox"> 
    </form> 
</body>

來源

2009-09-21 15:57:36 santosh

+14

嗨！哥們，你在這裏做什麼？ – omg 2009-09-21 16:13:57

看起來像一個範圍選擇（即，檢查第一項，按住Shift鍵，檢查最後一個，然後檢查所有的內容）。但是，這不僅僅是問題的要求，還缺少一些代碼，如checkUncheckAll（）。 – joelsand 2011-07-06 02:03:28

使用下面的代碼snipp等來實現這一目標。：

$('#checkAll').click(function(){ 
    $("#checkboxes input").attr('checked','checked'); 
}); 

$('#UncheckAll').click(function(){ 
    $("#checkboxes input").attr('checked',false); 
});

或者你也可以做同樣的單複選框：

$('#checkAll').click(function(e) { 
    if($('#checkAll').attr('checked') == 'checked') { 
    $("#checkboxes input").attr('checked','checked'); 
    $('#checkAll').val('off'); 
    } else { 
    $("#checkboxes input").attr('checked', false); 
    $('#checkAll').val('on'); 
    } 
});

對於演示：http://jsfiddle.net/creativegala/hTtxe/

來源

2011-11-16 09:24:23

的點擊會影響標籤，如果我們有一個附到輸入複選框？

我認爲這是更好地使用.change（）函數

3210

來源

2012-01-04 08:31:00

的jQuery 1.7+使用：

$('input[type=checkbox]').on('change', function() { 
    ... 
});

來源

2014-06-18 20:56:10

根據我的經驗，我已經利用該事件的currentTarget當前：

$("#dingus").click(function (event) { 
    if ($(event.currentTarget).is(':checked')) { 
    //checkbox is checked 
    } 
});

來源

2015-04-27 05:30:03

此代碼做什麼你的需要：

<input type="checkbox" id="check" >check it</input> 

$("#check").change(function(){ 
    if($(this).is(':checked')) { 
     alert("checked"); 
    }else{ 
     alert("unchecked"); 
    } 
});

此外，您可以檢查它jsfiddle

來源

2016-09-07 13:35:33

檢查複選框的更改事件

回答

相關問題