ラジオボタン、押しにくいですよね。
スマホとかだと特に。
labelで囲うてもありますが、例えば、テーブルや定義リストなんかで、
左側にラベル、右側にラジオボタンのみみたいな感じになった場合、
ラベルと要素が離れちゃうのでこの方法でもうまくいきません。
そんな時はこうすると便利です。
1 2 3 4 |
$('label').click(function(){ var target = $(this).attr('for'); $('#'+target).attr('checked',true); }); |
さらに、ラジオボタンがいるセル全体もクリック可能にしておくと、何度もタップして「あっれー?反応しないぞ??」といった状況を防げるかもしれません。
1 2 3 4 5 6 7 8 9 10 |
$('td').click(function () { if ($(this).children(':radio').length) { $(this).children(':radio').attr('checked', true); } else if ($(this).children('label').length) { var target = $(this).children('label').attr('for'); $('#' + target).attr('checked', true); } else { return false; } }); |
デモ
まとめ
指定した要素の中に任意の子要素がいるかを調べるには
1 2 3 4 5 |
if ($(this).children('調べたい要素名').length) { // 見つかった時の処理 } else { // 見つからなかった時の処理 } |
ラジオボタンの制御は
1 2 3 4 |
// ONにする $('要素名').attr('checked', true); // OFFにする $('要素名').attr('checked', false); |
checkedの値をON、OFFするので チェックボックにもつかえます。
コメントする