nur letzte Radiobutton löst checkCBfont() Funktion

Question

ich eine Gruppe von Radiobuttons und zwei Textfelder haben. Wenn ein Optionsfeld aktiviert ist, sollte sein Label und nur sein Label fett dargestellt werden. Allerdings führt nur der letzte das onclick-Ereignis aus, und das macht alle anderen Beschriftungen zusätzlich zu seinen eigenen fett, was nicht gemacht werden sollte. Die anderen Optionsfelder tun nichts, wenn sie aktiviert sind.

Das ist meine Form, die im Körper des HTML-Dokuments ist:

<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> 

und das sind die Funktionen, die das Onclick-Ereignis, das in getrennten Gruppen von Script-Tags sind sollen reagieren in der Kopf des hTML-Dokuments:

<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> 

ich habe mehrere verschiedene Ansätze ausprobiert, einschließlich, aber nicht beschränkt auf das Element mit inspizieren, versuchen ... catch, und google, aber ich kann nicht das Problem zu finden scheinen.

Um es zu wiederholen, ist das Problem, dass die letzte Optionsfeld die Etiketten alle anstelle der einzelnen Radiobutton bolds nur sein eigenes Label Bolding wenn/geprüft geklickt.

Kann jemand irgendwelche Ratschläge und/oder Anregungen?

Answer 1

Elternelement des Radios Eingänge ist die <Form> -tag. Wenn Sie das Schriftgewicht des übergeordneten Elements ändern, werden daher alle Beschriftungen geändert. Sie müssen alle Etiketten in einem anderen Element umfassen, z.B .:

<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> 

Der JavaScript-Teil ohne Probleme für mich gearbeitet.

Beispiel here

Answer 2

Sie dies mit viel weniger Code mit JQuery tun können: 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

Was

.bold { 
    font-weight: bold; 
}