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元素，try ... catch和google，但我似乎找不到问题。

重申一下，问题是最后一个单选按钮会加粗所有标签代替每个单选按钮，只有在点击/选中时才会加盖自己的标签。

任何人都可以提供任何建议和/或建议吗？

Answer 1

您的无线电输入的父元素是＆lt; form＆gt; -tag。因此，如果更改父元素的字体粗细，则会更改所有标签。您必须在所有标签中包含所有标签，例如：

<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

Answer 2

您可以使用少量代码的JQuery执行此操作：https://jsfiddle.net/ezj1Lfbw/10/

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>
  <span><input type="radio" class="radio" name="dateview" id="dvlist" value="list" checked>List</span>
  <br>
  <span><input type="radio" class="radio" name="dateview" id="dvcal" value="calendar">Calendar </span>
  <br>
  <span><input type="radio" class="radio" name="dateview" id="dvgantt" value="gantt">Gantt</span>
  <br>
  <span><input type="radio" class="radio" name="dateview" id="dvds" value="dailyswitching">Daily Switching</span>
  <br>
  <span><input type="radio" class="radio" name="dateview" id="dvdd" value="dailydetail">Daily Detail</span>
  <br>
  <span><input type="radio" class="radio" name="dateview" id="dvcd" value="currentdetail">Current/Future Detail</span>
  <br>
  <span><input type="radio" class="radio" name="dateview" id="dvco" value="currentonly">Current/Future List </span>
  <br>
</form>

JQuery的

  $('span').click(function() {
    $('span').removeClass('bold')
    $(this).addClass('bold')
  })

CSS

.bold {
  font-weight: bold;
}

只有最后一个单选按钮才会触发checkCBfont（）函数

2 个答案: