jQuery :radio 選擇器

jQuery 中的 :radio 選擇器用於選擇所有型別為 "radio" 的 input 元素。透過選擇，我們可以操作單選按鈕，例如“選中”、“停用”等。

語法

以下是 jQuery 中 :radio 選擇器的語法：

$(":radio")

引數

以下是上述語法的描述

":radio" − 此選擇器將選擇文件中所有單選按鈕元素。

示例 1

在下面的示例中，我們使用 ":radio" 選擇器來選擇所有型別為 "radio" 的 <input> 元素：

<html>
<head>
    <script src="https://code.jquery.com/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.jquery.com/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

列印頁面