通过ajax具有唯一ID的多个复选框

Question

我正在开发一个现在应该随时完成的网站，但我有一个新任务要完成，我需要选中复选框来简单地归档 新闻项目。如果您愿意，也可以选择“博客文章”。

我们的想法是在每篇博文上都有一个复选框，如果您选中该复选框，则该博文应该被归档。 （这仅在管理员模式下）。

我需要 ajax 来完成这项工作，但我还没有学会。 PHP部分没有问题。

问题确实是我不知道如何将每个复选框的唯一 ID 传递给 JavaScript 函数，然后传递给 PHP 函数。

好的，我有一组博文，女巫复选框，像这样：

<div class="news_item">
    <input name="checkbox_blog" id="checkbox1" value="1" type="checkbox"  />
</div>

<div class="news_item">
    <input name="checkbox_blog" id="checkbox2" value="1" type="checkbox"  />
</div>

等等。 Id 由 MySQL 中的 ID 填充。

我有某种用于 ajax 复选框的插件，但它只适用于一个复选框。

基本上是这样的：

$("#checkbox").change(function() { 
    if($(this).is(":checked")) { 
        $.ajax({
            url: 'admin/archive_it',
            type: 'POST'
        });
    } else {
        $.ajax({
            url: 'admin/dont_archive_it',
            type: 'POST'
        });
    }
});

在一个复选框上效果很好，但我不知道如何继续。

有什么建议吗？

我认为它可以使用两个不同的 php 脚本来检查和取消检查博客文章，这并不重要，我只希望它开始使用不同的复选框。

谢谢！

解决方案：

我将 id 更改为 classes，并使用 Arun P Johny 的代码：

$('.checkbox_blog').change(function () {
$.ajax({
    url: this.checked ? 'admin/archive_it' : 'admin/dont_archive_it',
    type: 'POST',
    data: {
        id: this.value
    }
    });
});

因为我使用的是 CodeIgniter，并且打开了 CSRF-security 选项，所以我不得不将其添加到数据中：

<?=$this->security->get_csrf_token_name()?> : '<?=$this->security->get_csrf_hash()?>',

现在它可以完美运行了！谢谢大家！

Answer 1

这里不需要ID，使用类属性对复选框进行分组，并将数据库id作为复选框的值

<div class="news_item">
    <input name="checkbox_blog" class="checkbox_blog" value="1" type="checkbox" />
</div>
<div class="news_item">
    <input name="checkbox_blog" class="checkbox_blog" value="2" type="checkbox" />
</div>

然后在 .checkbox_blog 元素的写入更改处理程序中，并将数据库项目的 id 传递给归档或不作为参数传递给服务器端 PHP

$('.checkbox_blog').change(function () {
    $.ajax({
        url: this.checked ? 'admin/archive_it' : 'admin/dont_archive_it',
        type: 'POST',
        data: {
            id: this.value
        }
    });
});

Answer 2

你快到了，除了有几件事情你可能需要注意，比如

1. 为所有复选框添加一个通用类，以便下面的事件处理程序对所有复选框都有效。
2. 没有必要保留多个 ajax 调用引用，尽管 url 是唯一的区别，所以我改进了你的代码，甚至纠正了我注意到的一些事情。

JS 代码：

$(".checkbox").on('change',function() { 
         var chkBit=$(this).is(":checked");
         var url;

        if(chkBit) 
            tarUrl='admin/archive_it';
        else
            tarUrl='admin/dont_archive_it';

        $.ajax({
                url: tarUrl,
                type: 'POST',
                success:function(){
                      //when the call is successful do something
                }
            });

 });`

Answer 3

为所有复选框提供相同的类，然后在更改任何复选框时传递使用 data 属性选择的复选框的 id（可能通过使用该类迭代所有复选框并收集已选中的复选框的 id )

Answer 4

<input name="checkbox_blog" id="checkbox1" value="1" type="checkbox" onClick="YourFunction()"  />
<input name="checkbox_blog" id="checkbox2" value="1" type="checkbox" onClick="YourFunction()"  />


function YourFunction(){
if($(this).is(":checked")) { 
        $.ajax({
            url: 'admin/archive_it',
            type: 'POST'
        });
    } else {
        $.ajax({
            url: 'admin/dont_archive_it',
            type: 'POST'
        });
    }
}

Answer 5

如果您对使用复选框中的 id 感到死心，您可以像这样传递data：（注意更改为选择器$("input[id^=checkbox]")

$("input[id^=checkbox]").change(function() { 
    if($(this).is(":checked")) { 
        $.ajax({
            url: 'admin/archive_it',
            type: 'POST',
            data: {
                id: $(this).attr('id').split('checkbox')[1]
            }
        });
    } else {
        $.ajax({
            url: 'admin/dont_archive_it',
            type: 'POST',
            data: {
                id: $(this).attr('id').split('checkbox')[1]
            }
        });
    }
});