使用不同的上下文进行带有复选框的单个 jquery ajax 调用

Question

我正在尝试使用jquery对php脚本进行动态调用。我有多个输入复选框

<input type="checkbox" id="driver[0]" value="log.example.com">
<input type="checkbox" id="driver[1]" value="api.example1.com">
<input type="checkbox" id="driver[2]" value="mail.example.com">

使用jquery，这就是我正在尝试做的，

$(document).ready(function() {
$("#driver[0]").click(function(event){
if($(this).is(':checked')){
var domain = $(this).val();
//alert(domain);
$("#stage").load('call.php', 'submit=submit&domain='+domain);
}
});
});

如您所见，jquery 在这里需要一个选择器#driver[0]，在我的情况下，它只能是其中之一。那么这是否意味着我必须为每个复选框编写单独的函数？

以下是数据更新到页面中的方式。

<div id = "stage" style = "background-color:#eee;">
STAGE
</div>

由于所有域都是动态生成的，我正在考虑一种更具适应性的方法来解决这个问题，但我没有运气。

谢谢

Answer 1

您可以使用选择器来选择所有以driver[开头的id：

$(document).ready(function() {
$("[id^='driver[']").click(function(event){
if($(this).is(':checked')){
var domain = $(this).val();
//alert(domain);
$("#stage").load('call.php', 'submit=submit&domain='+domain);
}
});
});

如果可能的话，从<input>的容器开始可能会更优雅，例如：

<div id="container">
<input type="checkbox" id="driver[0]" value="log.example.com">
<input type="checkbox" id="driver[1]" value="api.example1.com">
<input type="checkbox" id="driver[2]" value="mail.example.com">
</div>

然后

$('#container > input').click(...

Answer 2

使用一个函数动态执行此操作：

$(document).ready(function() {
$("input[type='checkbox']").click(function(event){
if($(this).is(':checked')){
var domain = $(this).val();
//alert(domain);
$("#stage").load('call.php', 'submit=submit&domain='+domain);
}
});
});