无法刷新单选按钮 Bootstrap 3

Question

发送表单后，我想“清理它”但取消选择之前选择的选项。

这是收音机：

<div class="btn-group" id="btnRadio" data-toggle="buttons">
    <label class="btn btn-default btn-sm">
        <span style="color: green;">
        <i class="fas fa-smile-beam"></i>
    </span>
    <input type="radio" name="radio1" id="idRadioBien"> Bien
    </label>
    <label class="btn btn-default btn-sm">
        <i class="far fa-meh"></i>
    </span>
    <input type="radio" name="radio1" id="idRadioNormal"> Normal
    </label>
    <label class="btn btn-default btn-sm">
        <span style="color: Tomato;">
        <i class="fas fa-sad-tear"></i>
    </span>
    <input type="radio" name="radio1" id="idRadioMal"> Mal
    </label>
</div>

我无法“取消选择”用户选择的收音机。

在检查了其他 Stack Overflow 问题后，我尝试使用类似以下内容“刷新”集合：

 $('input:radio')
     .removeAttr('checked')
     .removeAttr('selected')
     .button("refresh");

但仍然没有运气。它保持这样的选择：

Answer 1

prop 检查为 false ?

$('input:radio').prop('checked', false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group" id="btnRadio" data-toggle="buttons">
    <label class="btn btn-default btn-sm">
        <span style="color: green;">
        <i class="fas fa-smile-beam"></i>
    </span>
    <input type="radio" name="radio1" id="idRadioBien" checked> Bien
    </label>
    <label class="btn btn-default btn-sm">
        <i class="far fa-meh"></i>
    </span>
    <input type="radio" name="radio1" id="idRadioNormal"> Normal
    </label>
    <label class="btn btn-default btn-sm">
        <span style="color: Tomato;">
        <i class="fas fa-sad-tear"></i>
    </span>
    <input type="radio" name="radio1" id="idRadioMal"> Mal
    </label>
</div>

Answer 2

当您单击任何单选按钮时，active class 将添加到其标签中。因此，要从收音机中删除已选中，您还需要从标签标签中删除 active class。

演示代码 :

$(document).ready(function() {
  $('[data-toggle="buttons"] :radio').prop('checked', false); //remove checked if any
  $('[data-toggle="buttons"] label').removeClass('active'); //remove active class from label
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css" integrity="sha512-OdEXQYCOldjqUEsuMKsZRj93Ht23QRlhIb8E/X0sbwZhme8eUw6g8q7AdxGJKakcBbv7+/PX0Gc2btf7Ru8cZA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="btn-group" id="btnRadio" data-toggle="buttons">
  <label class="btn btn-default btn-sm active">
        <span style="color: green;">
        <i class="fas fa-smile-beam"></i>
    </span>
    <input type="radio" name="radio1" id="idRadioBien" checked> Bien
    </label>
  <label class="btn btn-default btn-sm">
     <span style="">
        <i class="far fa-meh"></i>
    </span>
    <input type="radio" name="radio1" id="idRadioNormal"> Normal
    </label>
  <label class="btn btn-default btn-sm">
        <span style="color: Tomato;">
        <i class="fas fa-sad-tear"></i>
    </span>
    <input type="radio" name="radio1" id="idRadioMal"> Mal
    </label>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

无法刷新单选按钮 Bootstrap 3

Can't Refresh radio buttons Bootstrap 3

jquery

twitter-bootstrap-3