何がしたいの？
3択のラジオボタンでの選択を、1ボタンで実装するにはどうしたらよいか。
ボタンを押すたびに、選択項目が変わっていくようなイメージ。
ただし、5択でも10択でも、汎用的に使える方法がよい。
実装方法
その①：選択肢が連続した数値の場合
数値からの選択の場合、input type=”range” が使いやすい気がする。
そもそも指定範囲内の数値を選ぶための部品なので。。。
ということで、実装！
<input type="range" class="selecter" id="range" min="1" max="3" />
<input type="button" id="select_button_range" value="切り替え" />
<p id="output"></p>#range {
display: none;
}$('#select_button_range').click(function(){
// 最大値の次が最小値となるよう、最大で割った値＋１をセットする
var value = Number( $('#range').val() ) % $('#range').attr('max');
$('#range').val( value + 1 );
// 確認用
$('#output').text( "現在の値は " + $('#range').val() + " です。" );
});連番であれば、そこまで複雑にならずに実装できる。
ここではボタンで切り替えを実装したが、
テキストであればLabelタグを使用するほうが見やすいかな？
<input type="range" class="selecter" id="range" min="1" max="3" />
<label for="range">切り替え</label>$('#range').click(function(){
var value = Number( $(this).val() ) % $(this).attr('max');
$(this).val( value + 1 );
$('#output').text( "現在の値は " + $(this).val() + " です。" );
})その②：選択肢が文字列もしくは、不規則の数値の場合
素直にラジオボタンを必要な分配置し、ボタンで切り替えるしかないかな？
<input type="radio" id="radio1" name="select" value="aaa" />
<input type="radio" id="radio2" name="select" value="test" />
<input type="radio" id="radio3" name="select" value="ccc" checked="checked" />
<input type="button" id="select_button" value="切り替え" />
<p id="output"></p>input[name="select"] {
display: none;
}$('#select_button').click(function(){
// 現在のインデックスと、最後のインデックスを取得
var selectIndex = $('input[name="select"]:checked').index();
var lastIndex = $('input[name="select"]').last().index();
if( selectIndex == lastIndex ){
// 取得したインデックスが同じな場合は最後の要素となるため、次の選択は最初となる
$('input[name="select"]').first().prop( 'checked', true );
}else{
// 異なる場合は次の要素を選択する
$('input[name="select"]').eq( ++selectIndex ).prop( 'checked', true );
}
// 確認用
$('#output').text( "現在の値は " + $('input[name="select"]:checked').val() + " です。" );
})補足
ここでのJavaScriptは、jQueryを使用しています。
コメント