在加载文件时取消选择单选按钮活动元素

Question

我创建了一组单选按钮，看起来像网站的进度条。从本地系统加载文件时，数据段将加载到每个单选按钮或进度条中。我可以单击每个单选按钮来查看加载到每个段中的数据。我有 css 样式在单选按钮上工作，以显示单选按钮已通过更改按钮的颜色被单击。当我从本地机器加载其他文件时，我想刷新单选按钮 onclick 颜色。换句话说，我想在从本地系统加载不同的文件时刷新按钮颜色。我在这里有我的代码正在被选中，或者至少我想要一个可以取消选择所有活动元素的清除按钮。我处理的代码似乎不起作用。

 <div class="w3-display-container col-md-12 col-sm-10 col-xs-8" style="position:relative;top:1px;bottom:0;">
  <!--<div class="container">-->
  <div class="row">
    <div class="btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-default">
                                            <input type="radio" name="options" id="option29" autocomplete="off" onchange="dataSegment(28)">
                                        </label>
      <label class="btn btn-default">
                                            <input type="radio" name="options" id="option30" autocomplete="off" onchange="dataSegment(29)">
                                        </label>
    </div>
  </div>
  <button ID="Button1" runat="server" Text="Button" OnClientClick="clearAllRadios()">clear me</button>

  <style>
.btn-default {
  color: #D8D8D8;
  background-color: #D8D8D8;
  border-color: #D8D8D8;
}

.btn-default:hover {
  background-color: #5F5A66;
}

.btn-default.active {
  background-color: #4A90E2;
  color: #4A90E2;
  background-color: #4A90E2;
}

.btn-default.color {
  background-color: #4A90E2;
}

.btn-default.focus {
  background-color: #1E3B5D !important;
}

input[type=radio] {
  margin-top: -6px;
}
  </style>

  <script>
$('.btn.btn-default').on("click", function() {
  $(this).addClass('color');
});

function clearAllRadios() {
  var radList = document.getElementsByName('radioList');
  radList.value = false
}
  </script>

Answer 1

以下代码将为您工作，

$('.btn.btn-default').on("click",function(){ 
       $(this).addClass('color');                        
});

$('#Button1').on('click',function() {
       alert('click');
       $('input:radio[name=options]').each(function () {                                      
                $(this).prop('checked', false);
                $(this).removeClass('color'); 
                $(this).parent().removeClass('color'); 
       });                  
});

 .btn-default{color: #D8D8D8;background-color: #D8D8D8;border-color: #D8D8D8;}
.btn-default:hover{background-color: #5F5A66;}
.btn-default.active{background-color:#4A90E2;color:#4A90E2;background-color:#4A90E2; }
.btn-default.color {background-color: #4A90E2;}
.btn-default.focus{background-color:#1E3B5D !important;}
input[type=radio]{margin-top:-6px;}

  
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div class="w3-display-container col-md-12 col-sm-10 col-xs-8" style="position:relative;top:1px;bottom:0;"><!--<div class="container">-->
             <div class="row">
                   <div class="btn-group btn-group-justified" data-toggle="buttons">
                        <label class="btn btn-default">
                                <input type="radio" name="options" id="option29" autocomplete="off" onchange="dataSegment(28)">
                         </label>
                         <label class="btn btn-default">
                                <input type="radio" name="options" id="option30" autocomplete="off" onchange="dataSegment(29)">
                         </label>
                    </div>        
              </div>
        <button ID="Button1" runat="server" Text="Button" OnClientClick="clearAllRadios()">clear me</button>

Answer 2

问题出在这里：

var radList = document.getElementsByName('radioList');

getElementsByName 返回一个 HTMLCollection，而不是单个元素。如果您想确保所有带有 radioList 名称的单选按钮都未选中，您可以这样做：

document.querySelectorAll('input[name="radioList"]').forEach(btn => {
  btn.checked = false
});

getElementsBy* 方法返回 HTMLCollections，这可能很难使用。 querySelectorAll 更易于交互；它返回一个静态 NodeList - 与 HTMLCollection 不同，它可以直接迭代，在迭代时不会改变，而且更加灵活。