0

現在選択されているラジオオプションに「現在の」クラスを追加しようとしています。使うことができます

onClick="document.getElementById('volunteering').class += 'current';"

ただし、これにより実際にクラスが追加されますが、別のラジオ ボタンを選択するとそのまま残ります (各ボタンにあるため)。すべてのラジオボタンに実装する方法について何か考えはありますか?

私が使用しているコードは次のとおりです。

<form> 
<ul>
    <input type="radio" name="category" id="volunteering" value="volunteering"><li class="conversation">
   <a href="#" onClick="document.getElementById('volunteering').checked = true;" >Volunteering</a>
 </li>
 <input type="radio" name="category" value="cityproblems" id="cityproblems"><li class="conversation">
   <a href="#" onClick="document.getElementById('cityproblems').checked = true;" >City Problems</a>
  </li>
 <input type="radio" name="category" value="safety" id="safety"><li class="conversation">
    <a href="#" onClick="document.getElementById('safety').checked = true;" class="">Safety</a>
 </li>
</form>
4

3 に答える 3

0

最初にそのクラスをすべてのラジオボタンから削除してから、クリックしたものに追加し直す必要があります。idをパラメーターとして受け取ることでこれを行う関数を定義し、それをにバインドしますonclick。

function selectRadioClass(radioId) {
  // Note - there are more clever ways, like arrays and loops
  // for this, but if it's only 3, this is fine
  document.getElementById('volunteering').className = '';
  document.getElementById('cityproblems').className = '';
  document.getElementById('safety').className = '';

  // Then add it back to the node passed in by id
  document.getElementById(radioId).className = 'current';
  // And check the button
  document.getElementById(radioId).checked = true;
}

onclick次に、以下を使用して各ラジオボタンをバインドします。

<a href="#" onClick="selectRadioClass('safety');" class="">Safety</a>
于 2012-05-25T01:55:49.453 に答える
0

2つの解決策があります：

CSS3:checkedセレクターを使用する

 form input:checked {
   /* your style rules here. */
   /* No more scripting needed. */
 }

http://www.quirksmode.org/css/enabled.html

この目的にはグローバル関数を使用します。

//Michaelのソリューションを確認します。

于 2012-05-25T01:57:20.230 に答える
0

CSS疑似セレクターを使用し、JavaScriptを忘れてください。のためのものがありelement:checkedます。

http://css-tricks.com/pseudo-class-selectors/

于 2012-05-25T02:01:05.093 に答える