JavaScript/jQuery 單選按鈕分組邏輯：點擊 DIV 切換選中狀態並互斥

` 各包一個 `` (用圖片代替原生樣式)，點擊 DIV 切換該 radio 選中/取消，同時取消其他 DIV 的選中狀態。純 JS 實作，無需 jQuery 依賴。

HTML 結構

<div class="radio-wrap"><input type="radio" name="group" value="1"><span>選項 1</span></div>
<div class="radio-wrap"><input type="radio" name="group" value="2"><span>選項 2</span></div>
<div class="radio-wrap"><input type="radio" name="group" value="3"><span>選項 3</span></div>

CSS 隱藏原生 radio、用圖片顯示狀態

.radio-wrap input[type="radio"] { display: none; }
.radio-wrap { cursor: pointer; padding: 10px; border: 1px solid #ddd; margin: 5px; display: inline-block; }
.radio-wrap.selected { border-color: #007bff; background: #e7f1ff; }
.radio-wrap::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 2px solid #999; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.radio-wrap.selected::before { background: #007bff; border-color: #007bff; box-shadow: inset 0 0 0 3px white; }

原生 JS 邏輯 (事件代理、狀態同步)

document.addEventListener('click', e => {
    const wrap = e.target.closest('.radio-wrap');
    if (!wrap) return;
    const radio = wrap.querySelector('input[type="radio"]');
    if (!radio) return;

    // 同 name 群組只能單選
    const name = radio.name;
    document.querySelectorAll(`input[type="radio"][name="${name}"]`).forEach(r => {
        r.checked = (r === radio);
        r.closest('.radio-wrap').classList.toggle('selected', r === radio);
    });
});

關鍵點解析

1. 同 name 屬性：原生 radio 同 name 自動互斥，無需手動取消其他。
2. 事件代理：綁在 `document`，動態新增 DIV 也生效。
3. 樣式類別同步：`.selected` 控制自訂圖案，JS 僅切換類別。
4. 無障礙：保留原生 ``，螢幕閱讀器、鍵盤 Tab 鍵正常運作。

若必須用 jQuery

$('.radio-wrap').click(function() {
    const $radio = $(this).find('input[type="radio"]');
    $radio.prop('checked', true).trigger('change'); // 觸發 change 事件
});
$('input[type="radio"]').change(function() {
    $('.radio-wrap').removeClass('selected')
        .has('input[type="radio"]:checked').addClass('selected');
});

核心心法：讓瀏覽器原生 radio 處理互斥邏輯，JS 只負責同步視覺狀態，代碼最少、相容性最好、無障礙合規。