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>

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

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

jQuery的版本可能与您使用的相同＆amp;它不一定是我在这里提到的。

其次，既然您说通过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＆amp;的额外属性。而是拥有你的jQuery＆amp; 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＆amp;然后使用$this.val()代替$('#active_banner').val()，确保您始终获得当前复选框的值，而不是第一个复选框。

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

3 个答案: