如何使用jQuery和Ajax與笨

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循環顯示的複選框，你應該把在其他屬性上的複選框，例如：數據-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> 

也避免了增加數據-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()確保您獲得當前複選框的值而不是第一個che ckbox總是。