如何使用 jquery 和 ajax 和 codeigniter 发送复选框的值

Question

各位如何制作一个复选框，如果我选中它，复选框上的值将发送到数据库而无需提交表单功能

这是我的复选框：

<input id="active_banner" type='checkbox' name='active_banner' value='1' title='Active Banner' <?=($data->promotion_active == 1)? "checked":""?> />

这是我的 jquery：

<script>
$("#active_banner").click(function() {
    var id = "<?=$data->promotion_banner_id?>"
    var active = $("#active_banner").val();
    jQuery.ajax({
        type: "GET",
        url: "/ADMIN/ajax/active_banner/",
        data: {id:id,active:active},
    });

    });
</script>

我尝试过检查，但是在我的 ajax 控制器中没有发生任何事情，其中​​包含：

function active_banner(){
    $id = $this->input->get("id",true);
    $active = $this->input->get("active",true);

    $this->Control_panel_m->update_banner_active($id,$active);
    redirect('/ADMIN/'.country_code."/Edit_promotion_banner","refresh");

}

各位大佬能帮我看看怎么弄吗？

Answer 1

您需要检查是否选中了复选框，单击将触发选中和未选中事件

尝试使用类似以下的内容

<script>
$("#active_banner").on("change",function(e) {
      var id = "<?=$data->promotion_banner_id?>"
      var active = $(this).is(":checked");
      jQuery.ajax({
        type: "GET",
        url: "/ADMIN/ajax/active_banner/",
        data: {id:id,active:active},
      });
    });
</script>

Answer 2

试试下面的

$(function(){
$("input[name='active_banner']").click(function() {
    var id = "<?=$data->promotion_banner_id?>"
    var active = $("#active_banner").val();
    if($(this).is("not(:checked)")){
        active = 0;
    };
    jQuery.ajax({
        type: "GET",
        url: "/ADMIN/ajax/active_banner/",
        data: {id:id,active:active},
        success: function(data){
           window.location = data;//redirect with javascript
        }
    });
    });
  });

php:

function active_banner(){
    $id = $this->input->get("id",true);
    $active = $this->input->get("active",true);

    $this->Control_panel_m->update_banner_active($id,$active);
    return '/ADMIN/'.$country_code."/Edit_promotion_banner";//return the url to redirect assuming country_code is a variable

}

Answer 3

第一件事：如果你已经包含了你的 jQuery 文件，如下所示：

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
<script>
$(document).ready(function () {
$("#active_banner").change(function() {
    var id = "<?=$data->promotion_banner_id?>"
    var active = $("#active_banner").val();
    jQuery.ajax({
        type: "GET",
        url: "/ADMIN/ajax/active_banner/",
        data: {id:id,active:active},
    });
});
});
</script>

在上述情况下，需要关闭包含语句的</script> 标签。所以 jQuery 包含应该是：

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.min.js"></script>

jQuery 的版本可以和你使用的一样，不一定是我这里提到的。

其次，既然您说您通过 foreach 循环显示复选框，您应该在您的复选框上添加另一个属性，例如：data-id

<input id="active_banner" type='checkbox' name='active_banner' value='1' title='Active Banner' <?=($data->promotion_active == 1)? "checked":""?> data-id="YOUR_UNIQUE_CHECKBOX_ID" class="active_banner_chk" />

其中 YOUR_UNIQUE_CHECKBOX_ID 是一个唯一值，每个复选框都不同。

然后，将你的 jQuery 修改为：

<script>
$(document).ready(function () {
$(".active_banner_chk").click(function() {
    var id = "<?=$data->promotion_banner_id?>";
    var active = 0;

    if( $(this).is(':checked') ) {
        var active = $(this).attr('data-id');
    }
    jQuery.ajax({
        type: "GET",
        url: "/ADMIN/ajax/active_banner/",
        data: {id:id,active:active},
    });
});
});
</script>

您也可以避免添加 data-id 的额外属性，而是使用您的 jQuery 和 HTML 元素，如下所示：

<script>
$(document).ready(function () {
$(".active_banner_chk").click(function() {
    var id = "<?=$data->promotion_banner_id?>";
    var active = 0;

    if( $(this).is(':checked') ) {
        var active = $(this).val();
    }
    jQuery.ajax({
        type: "GET",
        url: "/ADMIN/ajax/active_banner/",
        data: {id:id,active:active},
    });
});
});
</script>
<input id="active_banner" type='checkbox' name='active_banner' value='1' title='Active Banner' <?=($data->promotion_active == 1)? "checked":""?> class="active_banner_chk" />

根据类名调用您的 jQuery，然后使用 $this.val() 而不是 $('#active_banner').val() 确保您始终获得当前复选框的值而不是第一个复选框。