li タグ全体をリンクに。

質問

<ul>
<li><label><input type="radio" name="" value="" ><span>text</span></label></li>
<li><label><input type="radio" name="" value="" ><span>text</span></label></li>
<li><label><input type="radio" name="" value="" ><span>text</span></label></li>
</ul>

上記ですが、リストのどこを押してもラジオがチェックされるようCSSで実装したいと、考えています。html 5 で 最新スマフォならというところです。

どうぞよろしくおねがいいたします。

回答No.1

barusu0126 · ベストアンサー

↓こういうことですか？

<SCRIPT TYPE="text/javascript">
var count;
var i = 0;
function BoxChecked(check){
if(i == 0){
for(count = 0; count < document.form1.r1.length; count++){
document.form1.r1[count].checked = check;
i++;
}
}else{
for(count = 0; count < document.form1.r1.length; count++){
document.form1.r1[count].checked = "";
i--;
}
}
}
//-->
</SCRIPT>

<FORM NAME="form1">
<ul onClick="BoxChecked(true)">
<li><INPUT TYPE="checkbox" NAME="r1" VALUE="1"><span>text</span></label></li>
<li><INPUT TYPE="checkbox" NAME="r1" VALUE="2"><span>text</span></label></li>
<li><INPUT TYPE="checkbox" NAME="r1" VALUE="3"><span>text</span></label></li>
</ul>
</FORM>

お礼

回答ありがとうございます。
わかりにくい質問で申し訳ありません。
私のせいで、ほしい回答ではありませんでしたが、
別途使用させていただきます。
ありがとうございました。

回答No.3

play_with_you

「タグ全体」じゃ意味分からんし「リンク」じゃないねそれ。紛らわしい言葉を使うのはやめましょう。特に同じカテゴリ内で別の意味を明確に持っている言葉は。

barusu0126さんのようにJavaScriptを使って<li>内のクリックを拾うか、
CSSで<label>にdisplay:blockを与えてブロック要素として扱わせると要素の領域が<li>のいっぱいまで広がるので、
それを使ってください。

一応念のため言っておくと、「なんか上手いこと自動でそうなる」方法はありません。

お礼

OK!

回答No.2

神崎 渉瑠（@taloo）

質問文に書かれたそのままでいいのでは？

お礼

回答ありがとうございます。

補足

li タグを padding 等で高さを作り、長さが出ると、label 部分しかクリック出来ません。
li タグ領域のどの部分をタッチしても ラジオボタンがクリックされることが良いのですが、
今のところ、テキストを押せば程度の範囲で悩んでいます。