JavaScript单选按钮检查相关问题

选中单选按钮后，当我选择另一个选项时，它仍保持选中状态。我想在选择其他选项时取消选中它，但它没有这样做。当我使用引导css时，代码不起作用。臭虫在哪里

HTML:

<select class="form-control job-subcategory" autocomplete="off" name="job_subcategory">
    <option class="sub-catg-options" value="">Select Sub-Category(Optional)</option>
    <option class="electric-subcategory" value="Emergency Electricians">Emergency Electricians</option>
    <option class="electric-subcategory" value="Alarm Installer">Alarm Installer</option>
    <option class="electric-subcategory" value="Electrical Lighting">Electrical Lighting</option>
    <option class="electric-subcategory" value="Back Up Generators">Back Up Generators</option>
</select>

---

}))

首先，当您使用引导时，DOM需要比几乎空白的页面更长的加载时间。因此，当您的文档准备就绪时，请注册您的

change

事件（请参见下面的代码）。另一件事是，bootstrap使用自己的类在

元素之外添加额外的元素。我在

change

事件代码的末尾添加了类的删除

我在您的JS代码中添加了更改，它适用于我的引导：

<!-- If jQuery is not already implemented -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">

    $( document ).ready(function() {

        $('.job-subcategory').change(function () {
            if ($('.job-subcategory').val() == "Emergency Electricians") {
                $(':radio').prop('checked', false);
            }
            else if ($('.job-subcategory').val() == "Alarm Installer") {
                $(':radio').prop('checked', false); 
            }
            else if ($('.job-subcategory').val() == "Electrical Lighting") {
                $(':radio').prop('checked', false);     
            }
            else if ($('.job-subcategory').val() == "Back Up Generators") {
                $(':radio').prop('checked', false);     
            }

            $('.btn-group').find('label').removeClass('active');

        });
    });
</script>

$（文档）.ready（函数（）{
$（'.job子类别'）。更改（函数（）{
if（$（'.job子类别'）.val（）=“应急电工”）{
$（'：radio'）.prop（'checked'，false）；
}
else if（$（'.job子类别'）.val（）=“报警安装程序”）{
$（'：radio'）.prop（'checked'，false）；
}
else if（$（'.job子类别'）.val（）=“电气照明”）{
$（'：radio'）.prop（'checked'，false）；
}
else if（$（'.job子类别'）.val（）=“备份生成器”）{
$（'：radio'）.prop（'checked'，false）；
}
$（'.btn group'）.find（'label'）.removeClass（'active'）；
});
});

首先，当您使用引导时，DOM需要比几乎空白的页面更长的加载时间。因此，当您的文档准备就绪时，请注册您的

change

事件（请参见下面的代码）。另一件事是，bootstrap使用自己的类在

元素之外添加额外的元素。我在

change

事件代码的末尾添加了类的删除

我在您的JS代码中添加了更改，它适用于我的引导：

<!-- If jQuery is not already implemented -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">

    $( document ).ready(function() {

        $('.job-subcategory').change(function () {
            if ($('.job-subcategory').val() == "Emergency Electricians") {
                $(':radio').prop('checked', false);
            }
            else if ($('.job-subcategory').val() == "Alarm Installer") {
                $(':radio').prop('checked', false); 
            }
            else if ($('.job-subcategory').val() == "Electrical Lighting") {
                $(':radio').prop('checked', false);     
            }
            else if ($('.job-subcategory').val() == "Back Up Generators") {
                $(':radio').prop('checked', false);     
            }

            $('.btn-group').find('label').removeClass('active');

        });
    });
</script>

$（文档）.ready（函数（）{
$（'.job子类别'）。更改（函数（）{
if（$（'.job子类别'）.val（）=“应急电工”）{
$（'：radio'）.prop（'checked'，false）；
}
else if（$（'.job子类别'）.val（）=“报警安装程序”）{
$（'：radio'）.prop（'checked'，false）；
}
else if（$（'.job子类别'）.val（）=“电气照明”）{
$（'：radio'）.prop（'checked'，false）；
}
else if（$（'.job子类别'）.val（）=“备份生成器”）{
$（'：radio'）.prop（'checked'，false）；
}
$（'.btn group'）.find（'label'）.removeClass（'active'）；
});
});

这里的问题是引导css。即使您的js取消选中收音机，css也会将其显示为选中状态，因为

标签上的
活动
类未被删除。您必须从
标签
中删除
活动
类，使其看起来像未选中的

您可以从@Fabian Picone的答案中尝试以下代码：

$('.btn-group').find('label').removeClass('active');

删除活动类

这里是小提琴
这里的问题是引导css。即使您的js取消选中收音机，css也会将其显示为选中状态，因为
标签上的
活动
类未被删除。您必须从
标签
中删除
活动
类，使其看起来像未选中的

您可以从@Fabian Picone的答案中尝试以下代码：

$('.btn-group').find('label').removeClass('active');

删除活动类

这是小提琴
谢谢！法比安·皮肯，这段代码运行正常。@MuktoMona不客气！所以你可以将我的答案标记为已解决：-）谢谢！法比安·皮肯，这段代码运行正常。@MuktoMona不客气！因此，您可以将我的答案标记为已解决：-）