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.3 回答者： play_with_you 回答日時： 2013/12/12 18:24

「タグ全体」じゃ意味分からんし「リンク」じゃないねそれ。

紛らわしい言葉を使うのはやめましょう。特に同じカテゴリ内で別の意味を明確に持っている言葉は。

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

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

この回答へのお礼

OK!

お礼日時：2013/12/12 18:42

No.2 回答者： taloo 回答日時： 2013/12/12 14:51

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

この回答への補足

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

補足日時：2013/12/12 18:16

この回答へのお礼

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

お礼日時：2013/12/12 18:44

No.1 ベストアンサー 回答者： barusu0126 回答日時： 2013/12/12 14:44

↓こういうことですか？

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

この回答へのお礼

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

お礼日時：2013/12/12 18:43