Question

我正在尝试从复选框中收集多个数据，但我不确定如何执行此操作。现在我有：

<input tabindex="1" type="checkbox" name="friend[]" id="{{$friend}}" value="{{$friend}}" style="display:inline-block;">

这允许我收集我需要的id（包含在{{$ friend}}中）。但我还需要与此ID相关联的名称。有没有办法从一个复选框中收集多个值？我需要这个，因为我正在收集数据并转移到另一个表单而不更改视图。这将用于javascript，它会在检查时打印出视图中的内容（即id和名称）。

这是javascript：

<script>
$(document).ready(function(){
    var callbacks_list = $('.callbacks ul');
    $('.facebook-friends-larger input').on('ifChecked', function(event){
        callbacks_list.prepend('<li><img src="https://graph.facebook.com/'+this.id+'/picture" alt="" height="50" width="50"><span id="#'+this.id+'">#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>');
    });

    $('.facebook-friends-larger input').on('ifUnchecked', function(event) {
        callbacks_list.find('span#'+ this.id).closest('li').remove();
        console.log(this.id);
    });    
});
</script>

有什么想法吗？谢谢您的帮助。

Answer 1

试试这个会帮到你..

 $("input[type=checkbox]").change(function(){
        alert($(this).val()); //get a val
        alert($(this).attr('name')); //get a value of name attribute

    });

小提琴here

Answer 2

使用：

var name = $("#checkbox-id").attr("name"); // Use whatever method you have to target the checkbox

以获取其他值

Answer 3

试试这个

HTML

<input tabindex="1" type="checkbox" name="friend[]" id="123" value="{{$friend}}" style="display:inline-block;">test

JS

$(document).ready(function(){
    $("#123").change(function(){
        $(this).val(); //get a val
        console.log($(this).attr('name')); //get a value of name attribute

    });

});

FIDDLE

Answer 4

如果您在加载页面之前可以访问用户名（因此可以在页面加载或用户操作之后将其注入DOM而不进行Ajax查询），则可以将它们存储在HTML5 data-属性中例如，data-name采用以下格式：

<input tabindex="1" type="checkbox" name="friend[]" id="{{$friend}}" value="{{$friend}}" data-name="{{name}}" style="display:inline-block;">

您只需在jQuery中调用.data()方法即$('input').data('name')即可访问该名称。

如何从复选框输入中发送多个值

4 个答案: