按键样式的单选radio按钮与点击事件

效果

页面代码

配合bootstrap实现

<div id="right_top_wraper">
	<div id="right_button" class="button_wraper">
		<label for="radio_rt1" class="btn btn-primary">
			本日
			<input type="radio" style="display:none;" id="radio_rt1" name="radio_rt" class="btn btn-primary" value="本日"/>
		</label>
		<label for="radio_rt2"  class="btn btn-primary active">
			本月
			<input type="radio"  style="display:none;" id="radio_rt2" name="radio_rt" class="btn btn-primary" value="本月"/>
		</label>
		<label for="radio_rt3" class="btn btn-primary">
			本年
			<input type="radio"  style="display:none;" id="radio_rt3" name="radio_rt" class="btn btn-primary" value="本年"/>
		</label>
	</div>
</div>

JS代码

$('#right_top_wraper label').on('click','input',function(){
    $(this).parent().siblings().removeClass('active');
    $(this).parent().addClass('active'); 
    alert($('#right_top_wraper label input[type^=radio]:checked').val());
});