单击时如何更改动态单选按钮样式答案

【问题标题】：How to change dynamic radio button style when clicked单击时如何更改动态单选按钮样式
【发布时间】：2019-02-04 21:11:17
【问题描述】：

我目前正在使用单选按钮创建一个动态取件日期表单。当用户单击它时，我想更改当前选定值的样式。这是我不成功的代码：

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');
    });

我的问题是，它只适用于第一个按钮。

【问题讨论】：

标签： forms button dynamic radio box

【解决方案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;
}

【讨论】：