Question

我有以下代码，复选框是由php根据对象的数量生成的。每个对象有一个复选框，foreach中生成这些的代码如下（注意：这部分工作正常，我的问题如下）：

$sub = Reading::orderBy('created_at','desc');

return DB::table(DB::raw("({$sub->toSql()}) as sub"))
    ->whereIn('device_id', $ids)
    ->groupBy('device_id')
    ->get();

这是我试图用来标记任何＆＃34; clicked＆＃34;的jQuery脚本。框作为＆＃34;阅读＆＃34;。这个特殊的脚本在任何时候点击第一个框时都有效，但我需要它可以用于任何被点击的框（第二个，第三个等）。我只需要一次一个地工作，但我需要选择任何一个。

"<input type='checkbox' name='markAsUnread' id='markRead' value='$sms->id' class='markAsUnread'>",

我认为它不起作用，因为它只抓取第一个框，所以需要更改哪些内容才能使其适用于任何选中的复选框？

Answer 1

那应该不行。如果您反复创建具有相同ID的元素，则违反了html规则。只能有一个。

而不是将该函数仅应用于一个用ID标识的元素

var myEl = document.getElementById('markRead');

要求所有名称为“markRead”的元素：

var myElements = document.getElementsByName('markRead');

它为您提供了一个迭代的数组。

另外从

更改jquery-selector

$('#markRead')

到

$("[name=markRead]")

另外，请确保id-values在一个html文档中实际上是唯一的。

Answer 2

尝试以下脚本并检查

<script type="text/javascript">
    $(function(){
     var myElements = $('input[name=markAsUnread]');

    myElements.click(function() {
        var bloop = $('input[name=markAsUnread]:checked').val();
        $.ajax({
            type: 'POST',
            url: '/link/to/route',
            data: {sms: bloop}, 
            success: function(data) {                           
                window.location = '/foo/bar';},
            contentType: "application/json",
            dataType: 'json'
        });
    }, false);

    });
</script>

此外，从生成的复选框中删除ID属性，或将其设为唯一，而不是为所有元素设置相同的值。

Answer 3

所以我解决了它，迭代元素并在迭代器中添加一个单击监听器似乎可以解决问题：

    $(function(){
        var myElements = document.getElementsByName('markAsUnread');
        $.each(myElements, function (index){
            $(this).on("click", function(){
                $.ajax({
                    type: 'POST',
                    url: '/foo/bar',
                    data: {sms: $(this).val()}, 
                    success: function(data) {                           
                        window.location = '/back/home';},
                    contentType: "application/json",
                    dataType: 'json'
                });
            });
        });
    });

我还从PHP生成的复选框中删除了ID，因为我没有使用它们。

AJAX请求只在一个复选框上执行，需要它在任何复选框上执行

3 个答案: