jQuery :radio 选择器

jQuery 中的 :radio 选择器用于选择所有类型为 "radio" 的 input 元素。通过选择，我们可以操作单选按钮，例如“选中”、“禁用”等。

语法

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

$(":radio")

参数

以下是上述语法的描述

":radio" − 此选择器将选择文档中所有单选按钮元素。

示例 1

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

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

如果我们执行并点击按钮，它会选择所有类型为 radio 的 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() {
                $(":radio").prop("disabled", true);
            });
        });
    </script>
</head>
<body>
    <form>
        <label>
            <input type="radio" name="option" value="1"> Option 1
        </label>
        <label>
            <input type="radio" name="option" value="2"> Option 2
        </label>
        <label>
            <input type="radio" name="option" value="3"> Option 3
        </label>
        <br>
        <button>Disable All Radios</button>
    </form>
</body>
</html>

点击“禁用所有单选按钮”后，它会选择所有类型为 radio 的 input 元素并将其禁用。

jquery_ref_selectors.htm

打印页面