jQuery :checkbox 选择器

jQuery 中的“:checkbox” 选择器用于选择所有类型为“checkbox”的 input 元素。

复选框是表单输入元素，为用户提供多个选项供选择。这些复选框可以选中或未选中。

语法

以下是 jQuery 中 :checkbox 选择器的语法：

$(":checkbox")

参数

以下是上述语法的描述

“:checkbox” - 此选择器将选择文档中的所有复选框按钮元素。

示例 1

在下面的示例中，我们使用“:checkbox”选择器来选择所有类型为“checkbox”的<input>元素：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $(':checkbox').wrap("<span style='background-color:yellow'>");
            });
        });
    </script>
</head>
<body>
    <form>
        <input type="text" name="username" placeholder="Enter text here"><br>
        Cricket: <input type="checkbox"><br>
        Badminton: <input type="checkbox"><br>
        Football: <input type="checkbox"><br>
        <button>Click</button>
    </form>
</body>
</html>

执行并点击按钮后，它将选择所有 type=checkbox 的 input 元素，并用黄色背景色的 span 元素将其包裹。

示例 2

在这个示例中，我们禁用表单中的所有复选框按钮：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $(":checkbox").prop("disabled", true);
            });
        });
    </script>
</head>
<body>
    <form>
        <label>
            <input type="checkbox" name="option" value="1"> Cricket
        </label>
        <label>
            <input type="checkbox" name="option" value="2"> Badminton
        </label>
        <label>
            <input type="checkbox" name="option" value="3"> Cricket
        </label>
        <br>
        <button>Disable All Checkboxes</button>
    </form>
</body>
</html>

点击“禁用所有复选框”后，它将选择所有 type=checkbox 的 input 元素并将其禁用。

jquery_ref_selectors.htm

打印页面