單擊時如何更改動態單選按鈕樣式

Question

我目前正在使用單選按鈕創建一個動態取件日期表單。 當用戶單擊它時，我想更改當前選定值的樣式。 這是我不成功的代碼：

foreach ($period as $day){
echo '<label class="pickup-date" id="pickupdate"><input type="radio" value="'.$day->format('M-d-Y').'" name="pickup_date">'.$day->format('M') . ' <span>' .$day->format('d') . '</span> '. $day->format('D') .'<br/></label>';
}

Css

.pickup-date-tab label.checked{
background: #6d1f89 !important;
color: #fff; } 

jquery

$('#pickupdate').on('click',function(){
        $('#pickupdate').removeClass('checked');
        $(this).addClass('checked');
    });

我的問題是，它只適用於第一個按鈕。

Answer 1

我已經弄明白了，感謝這個網站。 我發現了相關的問題。

我已將代碼更新為

foreach ($period as $day)
                {
                    echo '<label class="pickup-date" id="pickupdate"><input type="radio" value="'.$day->format('M-d-Y').'" name="pickup_date"><div class="highlited">'.$day->format('M') . ' <span>' .$day->format('d') . '</span> '. $day->format('D') .'</div></label>';

                }

onclick 的正確 jquery

$(document).on('click','#deliverydate',function(){
    $('#pickupdate').removeClass('checked'); // i have removed this line instead I used CSS
    $(this).addClass('checked'); // i have removed this line instead I used CSS    });

Css

.pickup-date input[type=radio]:checked + .highlited{
    background: #6d1f89 !important;
    color: #fff;
}