javascript - 只有最后一个单选按钮触发 checkCBfont() 函数

Question

我有一组单选按钮和两个文本字段。当单选按钮被选中时，它的标签并且只有它的标签应该变成粗体。然而，只有最后一个执行 onclick 事件，这会将除了它自己的标签之外的所有其他标签变为粗体，这是不应该执行的。其他单选按钮在选中时不会执行任何操作。

这是我的表单，位于 html 文档的正文中:

<form name="form1">
From Date: <input type=text name="FromDate" id="FromDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select();" onblur="CheckDate(this)">
<br>
To Date: <input type=text name="ToDate" id="ToDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select()" onblur="CheckDate(this)">
<br>
<input type="hidden" name="dvval" value="">
<br>
<input type="radio" class="radio" name="dateview" id="dvlist" value="list" checked onclick="checkCBfont();">List
<br>
<input type="radio" class="radio" name="dateview" id="dvcal" value="calendar" onclick="checkCBfont();">Calendar 
<br>
<input type="radio" class="radio" name="dateview" id="dvgantt" value="gantt" onclick="checkCBfont();">Gantt
<br>
<input type="radio" class="radio" name="dateview" id="dvds" value="dailyswitching" onclick="checkCBfont();">Daily Switching
<br>
<input type="radio" class="radio" name="dateview" id="dvdd" value="dailydetail" onclick="checkCBfont();">Daily Detail
<br>
<input type="radio" class="radio" name="dateview" id="dvcd" value="currentdetail" onclick="checkCBfont();">Current/Future Detail
<br>
<input type="radio" class="radio" name="dateview" id="dvco" value="currentonly" onclick="checkCBfont();">Current/Future List 
<br>
</form>

这些是应该响应 onclick 事件的函数，它们位于 html 文档头部的单独脚本标记集中:

<script type="text/javascript">
function checkCBfont() {
   var ckBx=document.getElementsByTagName('INPUT');    // -- get all the input elements in the document
   var t='';
   for (i=0; i < ckBx.length;i++) {
      t=ckBx[i].getAttribute('type');
      if(t!=null){t=t.toLowerCase();}
      if (t=='checkbox'||t=='radio') { // -- get only those inputs that are checkboxes or radio buttons
         togglefont(ckBx[i]);          // -- if they're checked, make them bold, else make them normal
      }
   }     
}
</script>

<script type="text/javascript"> 
function togglefont(cb)  {
   //...toggle the label on a checkbox from bold to not-bold and back, when checked...
   if (cb.checked==true || cb.checked) {
       cb.parentNode.style.fontWeight='bold'; 
   }else{
       cb.parentNode.style.fontWeight='normal'; 
   }
} 
</script>

我尝试了几种不同的方法，包括但不限于使用inspect element、try...catch和google，但我似乎无法找到问题所在。

重申一下，问题在于最后一个单选按钮将所有标签加粗，而不是每个单选按钮在单击/选中时仅将其自己的标签加粗。

有人可以提供任何意见和/或建议吗？

Answer 1

单选输入的父元素是

标签。因此，如果更改父元素的字体粗细，所有标签都会更改。您必须将所有标签包含在另一个元素中，例如:

<form name="form1">
From Date: <input type="text" name="FromDate" id="FromDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select();" onblur="CheckDate(this)">
<br>
To Date: <input type="text" name="ToDate" id="ToDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select()" onblur="CheckDate(this)">
<br>
<input type="hidden" name="dvval" value="">
<br>
<span><input type="radio" class="radio" name="dateview" id="dvlist" value="list" checked onclick="checkCBfont();">List</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcal" value="calendar" onclick="checkCBfont();">Calendar </span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvgantt" value="gantt" onclick="checkCBfont();">Gantt</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvds" value="dailyswitching" onclick="checkCBfont();">Daily Switching</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvdd" value="dailydetail" onclick="checkCBfont();">Daily Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcd" value="currentdetail" onclick="checkCBfont();">Current/Future Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvco" value="currentonly" onclick="checkCBfont();">Current/Future List </span>
<br>
</form>

JavaScript 部分对我来说毫无问题。

示例 here