Question

我创建了一组单选按钮，看起来像是网站的进度条。在从本地系统加载文件时，数据段将加载到每个单选按钮或进度条中。我可以单击每个单选按钮以查看加载到每个段中的数据。我有单调样式处理单选按钮，以显示通过更改按钮的颜色单击单选按钮。当我从本地计算机加载其他文件时，我想刷新单选按钮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

问题在于：

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

getElementsByName返回HTMLCollection，而不是单个元素。如果您想确保取消选中radioList名称的所有单选按钮，您可以执行以下操作：

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

getElementsBy *方法返回HTMLCollections，这可能很难处理。 querySelectorAll可以更好地与之交互;它返回一个静态NodeList - 与HTMLCollection不同，它可以直接迭代，在迭代过程中不会发生变化，而且它更加灵活。

Answer 2

以下代码适用于您，

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

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

2 个答案: