jQuery获取复选框选中的值并在取消选中时移除该值

Question

以下是用于获取选中复选框的值以及取消选中的jQuery函数。

示例在此处

<input type="checkbox" id="check" value="3" />hiiii

<div id="show"></div>

function displayVals(){
var check = $('#check:checked').val();
    $("#show").html(check);
}
var qqqq = window.setInterval( function(){
        displayVals()
    },
    10
);

- JS-Hero

Answer 1

不需要设置时间间隔，每次有人更改复选框时，change事件就会被触发，在事件处理程序内，您可以根据复选框是否被选中来更改#show的HTML代码：

$('#check').on('change', function() {
    var val = this.checked ? this.value : '';
    $('#show').html(val);
});

FIDDLE

- adeneo

---

我想把值放在变量中，我该怎么做？ - JS-Hero

如何将其改进以使用多个复选框从“＃show” div中添加和删除值？ - Abu Nooh

Answer 2

工作演示 http://jsfiddle.net/cse_tushar/HvKmE/5/

JavaScript

$(document).ready(function(){
    $('#check').change(function(){
        if($(this).prop('checked') === true){
           $('#show').text($(this).attr('value'));
        }else{
             $('#show').text('');
        }
    });
});

- Tushar Gupta - curioustushar

Answer 3

还有另一种方法：

1. 使用新的属性方法返回true或false。

   $('#checkboxid').prop('checked');

2. 使用JavaScript而不是库

   document.getElementById('checkboxid').checked

3. 使用JQuery的is（）

   $("#checkboxid").is(':checked')

4. 使用attr获取选中

   $("#checkboxid").attr("checked")

我更喜欢第二个选项。

- Mahdi Aslami Khavari