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


当前回答

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

其他回答

//By each()
var testval = [];
 $('.hobbies_class:checked').each(function() {
   testval.push($(this).val());
 });


//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");

 //HTML Code

 <input type="checkbox" value="cricket" name="hobbies[]"  class="hobbies_class">Cricket 
  <input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey

例子 演示

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

检索复选框值的最佳方法如下所示

if ( elem.checked ) 
if ( $( elem ).prop( "checked" ) ) 
if ( $( elem ).is( ":checked" ) ) 

正如jQuery网站上的官方文档所解释的那样。其余的方法与复选框的属性无关,它们正在检查属性,这意味着它们正在测试加载复选框时的初始状态。简而言之:

当你有一个元素,你知道它是一个复选框,你可以简单地读取它的属性,你不需要jQuery(即element .checked),或者你可以使用$(elem).prop("checked"),如果你想依赖jQuery。 如果你需要知道(或比较)元素第一次加载时的值(即默认值),正确的方法是element . getattribute ("checked")或element .prop("defaultChecked")。

请注意,element .attr("checked")只有在jQuery 1.6.1+版本之后才会被修改,以返回与element .prop("checked")相同的结果。

有些答案是误导或不准确的,请自己检查以下内容:

http://api.jquery.com/prop/

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

最好的方法是$('input[name="line"]:checked').val()

你也可以得到select text $('input[name="line"]:checked').text()

为单选按钮输入添加值属性和名称。确保所有输入都具有相同的name属性。

<div class="col-8 m-radio-inline">
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="1" checked> Value Text 1
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="2"> Value Text 2
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="3"> Value Text 3
    </label>
</div>