用图片代替单选按钮作为选项
2011-04-02
单选按钮一般我们需要点中那个小圆圈，才可以选中该选项。那么我们能不能不点那个小圆圈，直接点该选项（文字或图片等）而进行选中呢？答案肯定是可以的，用label就可以实现，下面是一个简单的例子：
<html> <body> <p>请点击文本标记之一，就可以触发相关控件：</p> <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> </body> </html>
简单效果演示：
代码：
<div class="input"> <div class="type"> <ul> <input type="radio" name="action" value="献花" id="action1" /><label for="action1"><li class="t1" id="radio1">献花</li></label> <input type="radio" name="action" value="祭酒" id="action2" /><label for="action2"><li class="t2" id="radio2">献歌</li></label> <input type="radio" name="action" value="上香" id="action3" /><label for="action3"><li class="t3" id="radio3">点烛</li></label> <input type="radio" name="action" value="点烛" id="action4" /><label for="action4"><li class="t4" id="radio4">上香</li></label> <input type="radio" name="action" value="献歌" id="action5" /><label for="action5"><li class="t5" id="radio5">祭酒</li></label> <!-- <input type="radio" style="display:none" name="action" value="献歌" id="action5" /><label for="action5"><li class="t5" id="radio5"></li></label> --> </ul> </div> </div>
你也可以扩充这个效果：
<script type="text/javascript" src="http://www.nowamagic.net/frameworks/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.type').find('li').click(function(){
$('.type').find('li').removeClass('current');
$(this).addClass('current');
var type = '';
switch($(this).index()){
case 0:
type = '献花';
break;
case 1:
type = '献歌';
break;
case 2:
type = '点烛';
break;
case 3:
type = '上香';
break;
case 4:
type = '祭酒';
break;
}
$('#type').val(type);
});
$('#submit').click(function(){
if($('#type').val()==''){
alert("请选择怀念的方式");
return false;
}
if($('#misser').val()==''){
alert("请输入怀念的人");
return false;
}
if($('#word').val()==''){
alert("请输入留言");
return false;
}
})
})
</script>
相应HTML代码：
<form name="form1" method="post" action="http://admin.zhnews.net/message/cpindex1_5.php" onSubmit="return chkinput(this)">
<input type="hidden" name="action" value="" id="type" />
<div class="input">
<div class="miss">
我最思念的人：<input type="text" name="misser" id="misser" />
</div>
<div class="type">
<ul>
<li class="t1">献花</li></label>
<li class="t2">献歌</li></label>
<li class="t3">点烛</li></label>
<li class="t4">上香</li></label>
<li class="t5">祭酒</li></label>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="comment-box">
<textarea name="word" id="word" cols="30" rows="10"></textarea>
<input type="submit" value="提交" id="submit" />
</div>
</form>