如何在jQuery中获得复选框的值?


当前回答

在jquery中获取checkboxex的值:

var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.

for(var i=0; i<checks.length; i++){
    console.log($(checks[i]).val()); // or do what you want
});

在pure js中:

var checks = document.querySelectorAll("input[type='checkbox']:checked");

for(var i=0; i<checks.length; i++){
    console.log(checks[i].value); // or do what you want
});

其他回答

尽管这个问题需要jQuery解决方案,但这里有一个纯JavaScript的答案,因为没有人提到过它。

没有jQuery:

只需选择元素并访问选中的属性(返回布尔值)。

var checkbox = document.querySelector('input[type=“checkbox”]'); 警报(复选框.选中); <输入类型=“复选框”/>


下面是一个快速监听change事件的例子:

var checkbox = document.querySelector('input[type="checkbox"]'); 复选框。addEventListener('change',函数(e) { 警报(this.checked); }); < input type = "复选框" / >


要选择选中的元素,使用:checked伪类(input[type="checkbox"]:checked)。

下面是一个迭代检查的输入元素并返回已检查元素名称的映射数组的示例。

例子

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);

var elements = document.querySelectorAll('input[type="checkbox"]:checked'); var checkedElements = Array.prototype.map.call(elements, function (el, i) { return el.name; }); console.log(checkedElements); <div class="parent"> <input type="checkbox" name="name1" /> <input type="checkbox" name="name2" /> <input type="checkbox" name="name3" checked="checked" /> <input type="checkbox" name="name4" checked="checked" /> <input type="checkbox" name="name5" /> </div>

对于多于1个复选框,总是使用命名数组,如下例所示的国家,因为你知道国家可以选择多个,所以我使用name=" nations[]",而勾选复选框,你必须引用它的名字,如下例所示

var selectedCountries = ["Pakistan", "USA"]; $(document).ready(function () { $.each(selectedCountries, function (index, country) { $(`input[name='countries[]'][value='${country}']`).attr('checked', 'checked'); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p> <input type="checkbox" name="countries[]" value="Pakistan"> Pakistan </p> <p> <input type="checkbox" name="countries[]" value="India"> India </p> <p> <input type="checkbox" name="countries[]" value="USA"> USA </p>

要获取value属性的值,你可以这样做:

$("input[type='checkbox']").val();

或者如果你已经为它设置了一个类或id,你可以:

$('#check_id').val();
$('.check_class').val();

然而,无论是否检查,都会返回相同的值,这可能会令人困惑,因为它与提交的表单行为不同。

要检查是否已检查,请执行以下操作:

if ($('#check_id').is(":checked"))
{
  // it is checked
}

试试这个小方法:

$("#some_id").attr("checked") ? 1 : 0;

or

$("#some_id").attr("checked") || 0;

澄清一下:

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

将返回true或false