Question

我正在开设一个网站，现在应该在任何时候完成，但我有一项新任务要完成我需要检查复选框以简单存档< / strong>新闻。或者“博客帖子”，如果你喜欢。

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

我需要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改为了类，并使用了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安全选项，所以我不得不将其添加到数据中：

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

现在它完美无缺！谢谢大家！

Answer 1

此处不需要ID，使用class属性对复选框进行分组，并将数据库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

你几乎就在那里，除了你可能需要照顾的东西很少，比如

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

JS CODE：

$(".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（可能通过迭代所有复选框和类并收集被检查的复选框））

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

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

5 个答案: