JavaScript 单选按钮检查相关问题

Posted 2023-03-05

【中文标题】JavaScript 单选按钮检查相关问题

【英文标题】：JavaScript radio button checking related issue

【发布时间】：2016-01-03 18:45:56

【问题描述】：

选中一个单选按钮后，当我选择另一个选项时，它仍然处于选中状态。当我选择另一个选项时，我想取消选中它，但它没有这样做。当我使用引导 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>

收音机 1（预选） 电台 2 电台 3

我的 JS 代码：

$('.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);

);

【参考方案1】：

这里的问题在于引导 css。即使您的 js 取消选中收音机，css 仍将其显示为选中，因为 label 上的 active 类未删除。您必须从 labels 中删除 active 类，使它们看起来像未选中。

您可以从@F*** Picone 的回答中尝试此代码：

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

删除活动类。

这是小提琴http://jsfiddle.net/k7moorthi/qqwLgr94/1/

【参考方案2】：

首先，当您使用引导程序时，加载 DOM 需要比几乎空白页面更长的时间。因此，请在您的文档准备好时注册您的 change 事件（请参阅下面的代码）。另一件事是，引导程序在 <select> 元素之外添加了其他元素，并带有自己的类。我在 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>

【讨论】：

谢谢！ F*** Picone，此代码运行正常。

@MuktoMona 不客气！所以你可以将我的答案标记为已解决:-)