0

ラジオボタンを画像に置き換えたいのですが、このコードを見つけましたが、1 つのラジオグループでしか機能しません。誰かが別のコードを持っていますか。やりたいこと: Fiddle .

//Group 1
<input type="radio" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label>
<input type="radio" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
<input type="radio" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
//Group 2
<input type="radio" name="second" id="sd" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
<input type="radio" name="second" id="sc" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>

誰か私にJavascriptコードを教えてもらえますか?

4

1 に答える 1

2

まずid、2番目のグループの無線の属性を変更しましたが、ラベルforの属性は最初のグループの要素の1つのIDに設定されています。CSSでラジオを非表示にしているため、これは表示されませんが、2番目のグループのラベルをクリックすると、最初のグループのラジオが選択済みとしてマークされます。長時間必要なものをすべて更新せずにコピーアンドペーストによって引き起こされるバグを探すため、コードを慎重にコピーアンドペーストすることを忘れないでください。

2番目のこと-メソッドは要素のすべての兄弟を返すので、現在のHTMLコードでは、すべてのラジオが兄弟siblings()であることがわかります。たとえば、各グループをでラップすることをお勧めします。そうすれば、グループは分離され、JSコードは同じになります。div

質問からHTMLを更新しました：

<div>
    <input type="radio" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label>
    <input type="radio" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
    <input type="radio" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
</div>

<div>
    <input type="radio" name="second" id="sd" value="superuser" /><label for="sd"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
    <input type="radio" name="second" id="sc" value="superuser" /><label for="sc"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
</div>

更新されたフィドルはここにあります。ラジオが正しく選択されているかどうかを確認したい場合は、CSSを適用してラジオを非表示にする行をコメントアウトして、ラジオがどのように動作するかを確認します。

//$('#sites input:radio').addClass('input_hidden');
于 2013-02-10T12:59:23.773 に答える