Question

我的网站有以下内容：

<td><input id="inp_0001010030" type="checkbox"></td>
<td><input id="inp_0001010031" type="checkbox"></td>
<td><input id="inp_0001010032" type="checkbox"></td>
<td><input id="inp_0001010033" type="checkbox"></td>
<td><input id="inp_0001010034" type="checkbox"></td>

这些是动态创建的。

在包含上述行的区域外的页面底部的表单：

<form action="??" method="??" >
   <input value="Action"  type="submit">
      <select id="SelectedAction" >
        <option value="1">Delete</option>
        <option value="2">Move</option>
      </select>
</form>

创建行之后，我需要点击事件表单按钮查看每个复选框，然后为找到的每个复选框调用带有id和SelectedAnswer值的javascript函数。

请注意，如果有一种方法可以在没有表单的情况下执行此操作，那么它会更好。我对jQuery知之甚少。

这是我可以轻松使用jQuery做的事情吗？

Answer 1

$("input[type=submit]").click(function () {
    var answer = $("#SelectedAnswer").val();
    $("input:checked").each(function () {
        var id = $(this).attr("id");
        alert("Do something for: " + id + ", " + answer);
    });
});

Answer 2

$('input[type=checkbox]:checked').each(function() {
    // Do something interesting
});

Answer 3

您需要在复选框中添加一个类。之后，使用jQuery的.each()方法，如下所示：

<强> HTML

<input type="checkbox" class="list">
<input type="checkbox" class="list">
<input type="checkbox" class="list">
<input type="checkbox" class="list">
<input type="checkbox" class="list">

<强>的jQuery

$(document).ready(function()
{
    $("form input[type='submit']").click(function(e)
    {
        e.preventDefault();

        // This gets the value of the currently selected option
        var value = $(this).children(":selected").val();

        $(".list").each(function()
        {
            if($(this).is(':checked'))
            {
                $(this).fadeOut();
                // Do stuff with checked box
            }
            else
            {
                // Checkbox isn't checked
            }
        })
    });
});

修改

请参阅此fiddle（上面的代码）。我只实现了删除选项（不是很好），但使用value变量来检查选择了哪个选项。如果您希望在提交表单之前执行此操作，请删除e.preventDefault()行。

Answer 4

当然。

您要做的第一件事是使用$.submit()处理程序将事件处理程序绑定到表单上的提交事件。接下来，您将要遍历每个已检查的输入元素：

$('form').submit(function() {
    var action = $('#SelectedAction option:selected', this).val();
    $('table input:checkbox:checked').each(function(i){
       return doMyCustomFunction(this, action);
    });
}

您的自定义功能（我的示例中为“doMyCustomFunction()”）应返回true或false，具体取决于您是否要提交表单。

通过一个实际的例子，它可能看起来像这样：

function doMyCustomFunction(el, formAction) {
   console.info('The element ID is ' + el.id + ' and the action is ' + formAction);
   return true;
}

如何遍历所有选中的复选框？

4 个答案: