假單選按鈕1僅選項

Question

我正在嘗試模擬單選按鈕的行為，但是為了代替css樣式，使用了span而不是輸入標簽。 我可以模擬狀態的變化，但是我無法弄清楚如何只選擇一個按鈕。

這是我的“狀態改變”的js：

function CheckRadioButton() {
    $(".radio-button").click(function () {
        if ($(this).hasClass('checked')) {
            $(this).removeClass('checked');
        } else {
            $(this).addClass('checked');
        }
    });
}

我想做的是，如果一個按鈕將其類別更改為選中，則其余所有按鈕都必須“未選中”。

我遇到的另一個問題是我有幾個“類別”，在這些類別中我使用這種類型的按鈕，並且我只希望每個類別中都有唯一的選項。 例如：

<p class="fake-label">Skirt</p>
            <div class="radio-button-wrapper">
                <span class="radio-button"></span>
                <span>Yes</span>
            </div>
            <div class="radio-button-wrapper">
                <span class="radio-button"></span>
                <span>No</span>
            </div>

<p class="fake-label">Season</p>
                <div class="radio-button-wrapper">
                    <span class="radio-button"></span>
                    <span>Summer</span>
                </div>
                <div class="radio-button-wrapper">
                    <span class="radio-button"></span>
                    <span>Winter</span>
                </div>

我該怎么做才能在“是/否”之間僅“選擇”一個，而在“夏季/冬季”之間僅“選擇”一個，而同時選擇兩者呢？ （只有兩個跨度可以同時“檢查”類）

謝謝 ：）

Answer 1

嘗試這個

小提琴

您可以添加一個額外的div來對相似的類別進行分組，並更新您的jquery代碼，如下所示。

HTML

<p class="fake-label">Skirt</p>
<div class="radio-group">
            <div class="radio-button-wrapper">
                <span class="radio-button"></span>
                <span>Yes</span>
            </div>
            <div class="radio-button-wrapper">
                <span class="radio-button"></span>
                <span>No</span>
            </div>
</div>
<p class="fake-label">Season</p>
<div class="radio-group">
                <div class="radio-button-wrapper">
                    <span class="radio-button"></span>
                    <span>Summer</span>
                </div>
                <div class="radio-button-wrapper">
                    <span class="radio-button"></span>
                    <span>Winter</span>
                </div>
</div>

使用Javascript

 $(".radio-button").click(function () {        
             $(this).closest('div.radio-group').find(".radio-button").removeClass('checked');  
             $(this).addClass('checked');               
  });

Answer 2

您可以將實際輸入的功能與使用其他標簽的自由結合起來：

 .input-wrap { position: relative; } input[type="radio"] { display: none; } input[type="radio"] + label { padding-left: 22px; } input[type="radio"] + label:before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; border: 2px solid black; border-radius: 50%; transform: translateY(-50%); } input[type="radio"]:checked + label:after { content: ""; position: absolute; left:3px; top: 50%; width: 8px; height: 8px; background-color: #bada55; border-radius: 50%; transform: translateY(-50%); } 

 <div class="input-wrap"> <input type="radio" name="test" id="option1" checked><label for="option1">Option1</label> </div> <div class="input-wrap"> <input type="radio" name="test" id="option2"><label for="option2">Option1</label> </div> <div class="input-wrap"> <input type="radio" name="test" id="option3"><label for="option3">Option1</label> </div> 

就像在示例中添加/刪除類一樣，但是我們使用:checked + label選擇器來選擇當前選中輸入的標簽，這樣我們就可以（幾乎）具有實際輸入的可訪問性，並且可以自由選擇按照我們希望的方式編寫標記。 最好的事情是該解決方案僅適用於CSS，可用於隱藏/顯示頁面的整個部分。

PS：我說“幾乎”相同的可訪問性，因為我認為某些屏幕閱讀器會忽略帶有display: none輸入，要解決此問題，您仍然可以使用：

position: absolute;
left: -99999px;

編輯：由於它確實接縫了，您真的想拒絕這個假輸入，這應該可以幫助：

$(".radio-button").click(function () {
    $(".radio-button").removeClass('checked);
    $(this).addClass('checked');
});