Question

我有两个页面：主页通过AJAX调用另一个页面来获取复选框列表。当我尝试在主页面上获取已选中复选框的计数时，我只能在使用内联jQuery时执行此操作 - 尝试通过我在 $(document.ready()) 中初始化的变量获取它不行。

这是主页：

<!doctype html>
<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <script src="/jquery-1.5.1.js"></script>
        <script>
        var MyDiv, CheckedCheckboxes;
        var bIsLoading;

        $(document).ready(function(){
            $("input:checkbox[name='SomeChoice']").live("click", function(){
                ShowCheckboxCount();
            });

            MyDiv = $("#MyDiv");
            CheckedCheckboxes = MyDiv.find("input:checkbox[name='SomeChoice']:checked");
            bIsLoading = false;
        });

        function ShowCheckboxCount()
        {
            var countUsingVariable = CheckedCheckboxes.length;
            var countUsingInline = $("#MyDiv").find("input:checkbox[name='SomeChoice']:checked").length;

            var alertMsg = (
                '# of checked checkboxes (using MyDiv variable) = ' + countUsingVariable + '\n' + 
                '# of checked checkboxes (using inline jQuery) = ' + countUsingInline
            );

            alert(alertMsg);
        }

        function LoadCheckboxes()
        {
            if (bIsLoading)
            {
                alert('Options are still loading.');
                return;
            }

            bIsLoading = true;

            $.ajax({
                type: "POST",
                dataType: "html",
                url: "GetGuidOptions.asp",
                data: "",
                timeout: 5000,
                success: function(data, textStatus, XmlHttpRequest){
                    $('#MyDiv').html(data);
                },
                error: function(XmlHttpRequest, textStatus, errorThrown){
                    alert('An error occurred while attempting to load the options.');
                },
                complete: function(XmlHttpRequest, textStatus) {
                    bIsLoading = false;
                }
            });
        }
        </script>

        <form id="MyForm" name="MyForm">

        <div id="MyDiv">
        </div>

        <input type="button" value="Load Checkboxes" onclick="LoadCheckboxes()">
        <input type="button" value="Show Checkbox Count" onclick="ShowCheckboxCount()">
        </form>
    </body>
</html>

这是第二页 - 它是用VBScript / ASP编写的，但可以使用任何服务器端语言轻松完成：

<%
    Option Explicit

    '##################################################################################
    '// GetAlphanumericGUID() - Generate a GUID containing only letters and numbers.
    '##################################################################################
    Function GetAlphanumericGUID()
        Dim oTypeLib, sGUID, oRegEx, sAlphanumericGUID

        '// Generate a GUID.
        Set oTypeLib = Server.CreateObject("Scriptlet.TypeLib")
            sGUID = Trim(Left(oTypeLib.GUID, 38))
        Set oTypeLib = nothing

        '// Remove all non-alphanumeric characters from the GUID.
        Set oRegEx = New RegExp
            oRegEx.Pattern = "\W"
            oRegEx.IgnoreCase = True
            oRegEx.Global = True
            sAlphanumericGUID = Replace(oRegEx.Replace(sGUID, ""), "_", "")
        Set oRegEx = Nothing

        GetAlphanumericGUID = sAlphanumericGUID
    End Function


    dim i, sValue
    for i = 1 to 10
        '// Generate a GUID string 5 characters in length
        sValue = Left(GetAlphanumericGUID(), 5) %>
<input type="checkbox" name="SomeChoice" value="<%=sValue%>"> <%=sValue%><br>
<%    next %>

有没有办法让它工作，所以我可以使用 CheckedCheckboxes.length 代替 $("#MyDiv").find("input:checkbox[name='SomeChoice']:checked").length 来获取选中的复选框计数？

Answer 1

不是你所描述的方式，不是。 jQuery选择器在创建时运行一次，并创建一个包含与选择器匹配的元素的jQuery对象。匹配但稍后添加的元素将不属于该对象。

现在，live和delegate函数提供了一种解决方法，但它们仅适用于事件处理。基本上，如果使用live设置事件处理程序，它会捕获所有事件（对于所有元素）并检查触发事件的元素是否与给定的选择器匹配。（因此，在最初调用live函数时，该元素是否存在并不重要。）

但是，这并不能让您像往常一样自动保持不断更新的复选框列表。

另一种方法是创建一个返回所需列表的函数，然后使用它（如果你的目标是减少输入/重复代码）：

function CheckedCheckboxes() {
    return MyDiv.find("input:checkbox[name='SomeChoice']:checked");
}

alert("Checked Boxes: " + CheckedCheckboxes().length);

Answer 2

所以基本上你所看到的是声明

$("#MyDiv").find("input:checkbox[name='SomeChoice']:checked")

在调用时解析（执行）。你有点试图推迟执行。您可以做的一件事就是将选择器保存在变量中并使用：

var selector = "input:checkbox[name='SomeChoice']:checked";
...
$('#MyDiv').find(selector).length;

Answer 3

是的，您可以：为您的所有复选框提供相同的class：

<input type="checkbox" name="SomeChoice" value="<%=sValue%>" class='someClass'> 
    <%=sValue%><br>
<input type="checkbox" name="SomeChoice" value="<%=sValue%>" class='someClass'> 
    <%=sValue%><br>

然后在js：

$('input.someClass:checked').length

jQuery，变量和实时事件处理程序

3 个答案: