简明现代魔法 -> web设计理念 -> 用图片代替单选按钮作为选项

用图片代替单选按钮作为选项

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>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们