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


当前回答

尽管这个问题需要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>

其他回答

jQuery(".checkboxClass").click(function(){
        var selectedCountry = new Array();
        var n = jQuery(".checkboxClass:checked").length;
        if (n > 0){
            jQuery(".checkboxClass:checked").each(function(){
                selectedCountry.push($(this).val());
            });
        }
        alert(selectedCountry);
    });
<script type="text/javascript">
$(document).ready(function(){
    $('.laravel').click(function(){
        var val = $(this).is(":checked");
        $('#category').submit();
    });
});

<form action="{{route('directory')}}" method="post" id="category">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input name="category" value="{{$name->id}}"  class="laravel" type="checkbox">{{$name->name}}
                      </form>

对于多于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>

澄清一下:

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

将返回true或false

试试这个小方法:

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

or

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