用js实现一个简单特效

轻弹浅唱 2011-11-23 05:28:30
大家都做过调查问卷吧，一行是题目，下一行是4个选项，这样一题一题的列出来，
选项这行是这样 四个单选按钮横着排列，4选1，一开始都没有选中，现在我要一个效果，就是一但选择了其中一个按钮后，整个这一行就高亮显示或换个颜色显示来突出一下，这个功能用js应该可以实现的吧？求那位js高手给我讲讲？
...全文
537 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
fyq2790704 2012-01-19
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 hackersun12345 的回复:]

引用 12 楼 yenange 的回复:
JScript code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/ja……
[/Quote]
是啊！
hackersun12345 2011-11-25
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 yenange 的回复:]
JScript code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></scr……
[/Quote]
这个必须要顶，一看就懂
默默不得鱼 2011-11-25
  • 打赏
  • 举报
 回复
jquery入门就看API和小例子 看书完全是浪费时间 思路就是给每个radio注册一个onchange
里面通过触发事件的这个radio去获取radio所在的tr 改变tr的style.backgroundColor
吉普赛的歌 社区高级成员 T9 2011-11-25
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 yc1172000 的回复:]

引用 12 楼 yenange 的回复:
JScript code


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/……
[/Quote]
百度一下或者买书吧, jquery的教程到处都是. www.w3cschool.com比较有规范点.
轻弹浅唱 2011-11-25
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 yenange 的回复:]
JScript code


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></s……
[/Quote]有好的jquery教程吗？推荐一下
吉普赛的歌 社区高级成员 T9 2011-11-24
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 yc1172000 的回复:]

引用 6 楼 yenange 的回复:
楼主你为啥不看3楼?

你那个怎么实现的？JQuery不太会用啊
[/Quote]

只要把我的代码复制粘贴到一个空白的html文件中, 再保存为 a.html, 双击执行就好了嘛 .
轻弹浅唱 2011-11-24
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 hailinger14 的回复:]
JScript code


<script>
function doit(){
var n = this.name;
var a = document.getElementsByName(n);
var b = false;
for(var i=0;i<a.length;i++){
if(a[i].checked){
……
[/Quote]
兄弟你不错啊，把人家的代码一改就行了，佩服
轻弹浅唱 2011-11-24
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 yenange 的回复:]
楼主你为啥不看3楼?
[/Quote]
你那个怎么实现的？JQuery不太会用啊
吉普赛的歌 社区高级成员 T9 2011-11-24
  • 打赏
  • 举报
 回复
楼主你为啥不看3楼?
hailinger14 2011-11-24
  • 打赏
  • 举报
 回复 


<script>

function doit(){

    var n = this.name;

    var a = document.getElementsByName(n);

    var b = false;

    for(var i=0;i<a.length;i++){

        if(a[i].checked){

            b = true; break;

        }

    }

    this.parentNode.parentNode.style.background = b?"gray":"transparent";

}

window.onload =function(){

    var a = document.getElementsByTagName("input");

    for(var i=0;i<a.length;i++){

        if(a[i].type="checkbox"){

            a[i].onclick = doit;

        }

    }    

}

</script>





<body style="margin: 0px;">

	<table cellpadding="0" cellspacing="0" border="1">

		<tr>

			<td colspan="4">xx</td>

		</tr>

		<tr>

			<td><input type="checkbox" name="ck" value="1"></td>

			<td><input type="checkbox" name="ck" value="2"></td>

			<td><input type="checkbox" name="ck" value="3"></td>

			<td><input type="checkbox" name="ck" value="4"></td>

		</tr>

		<tr>

			<td colspan="4">xx</td>

		</tr>

		<tr>

			<td><input type="checkbox" name="ck1" value="1"></td>

			<td><input type="checkbox" name="ck1" value="2"></td>

			<td><input type="checkbox" name="ck1" value="3"></td>

			<td><input type="checkbox" name="ck1" value="4"></td>

		</tr>

		<tr>

			<td colspan="4">xx</td>

		</tr>

		<tr>

			<td><input type="checkbox" name="ck2" value="1"></td>

			<td><input type="checkbox" name="ck2" value="2"></td>

			<td><input type="checkbox" name="ck2" value="3"></td>

			<td><input type="checkbox" name="ck2" value="4"></td>

		</tr>

	</table>

</body>
吉普赛的歌 社区高级成员 T9 2011-11-24
  • 打赏
  • 举报
 回复 


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>  

    <style type="text/css">

        .light{ color:red;background-color:#8ADEFF;}

        li{ list-style-type:none;float:left;width:200px;cursor:pointer;}

        input{cursor:pointer;}

    </style>

    <script type="text/javascript">

        //上面的<script src="http://ajax.googleapis.。。。></script>是引入google里面的jquery.js文件， 你项目里原样照抄就好了。

        //下面这个$(function () {}）相当于 window.onload, 但是比它加载的时刻会快一点。

        $(function () {

            //为id="ulQuestion1"元素下的所有单选钮注册click事件

            $("#ulQuestion1 :radio").click(function () {

                //被单击的单选钮的父元素将添加样式light, 并将它的父元素的兄弟元素移除样式light

                $(this).parent().addClass("light").siblings().removeClass("light");

            });

        })

    </script>

</head>

<body>

    <div>你是老几?</div>

    <ul id="ulQuestion1" >

        <li><input name="op" type="radio" value="1" />1</li>

        <li><input name="op" type="radio" value="2" />2</li>

        <li><input name="op" type="radio" value="3" />3</li>

        <li><input name="op" type="radio" value="4" />4</li>

    </ul>

    <!--要纵向排列, 只需将样式里的 float:left; 去掉即可-->

</body>

</html>


上面的注释够清楚了吧, 只要你学会了jquery， 思路比原生的javascript要更清晰更快捷
轻弹浅唱 2011-11-24
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 hookee 的回复:]
HTML code


<script>
function doit(){
var n = this.name;
var a = document.getElementsByName(n);
var b = false;
for(var i=0;i<a.length;i++){
if(a[i].checked){
……
[/Quote]
兄弟，如果选项在table里的4个td里面，怎么实现选择一个td，同一行的四个都亮了？
轻弹浅唱 2011-11-24
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 yenange 的回复:]
引用 8 楼 yc1172000 的回复:

引用 6 楼 yenange 的回复:
楼主你为啥不看3楼?

你那个怎么实现的？JQuery不太会用啊


只要把我的代码复制粘贴到一个空白的html文件中, 再保存为 a.html, 双击执行就好了嘛 .
[/Quote]
我是想要一种解决思路，还要结合我的项目去修改的，jquery这个东西我完全不懂它的实现原理，不知道怎么去改
吉普赛的歌 社区高级成员 T9 2011-11-23
  • 打赏
  • 举报
 回复 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>  

    <style type="text/css">

        .light{ color:red;background-color:#8ADEFF;}

        li{ list-style-type:none;float:left;width:200px;cursor:pointer;}

        input{cursor:pointer;}

    </style>

    <script type="text/javascript">

        $(function () {

            $("#ulQuestion1 :radio").click(function () {

                $(this).parent().addClass("light").siblings().removeClass("light");

            });

        })

    </script>

</head>

<body>

    <div>你是老几?</div>

    <ul id="ulQuestion1" >

        <li><input name="op" type="radio" value="1" />1</li>

        <li><input name="op" type="radio" value="2" />2</li>

        <li><input name="op" type="radio" value="3" />3</li>

        <li><input name="op" type="radio" value="4" />4</li>

    </ul>

    <!--要纵向排列, 只需将样式里的 float:left; 去掉即可-->

</body>

</html>
hookee 2011-11-23
  • 打赏
  • 举报
 回复 


<script>

function doit(){

	var n = this.name;

	var a = document.getElementsByName(n);

	var b = false;

	for(var i=0;i<a.length;i++){

		if(a[i].checked){

			b = true; break;

		}

	}

	this.parentNode.style.background = b?"gray":"transparent";

}

window.onload =function(){

	var a = document.getElementsByTagName("input");

	for(var i=0;i<a.length;i++){

		if(a[i].type="checkbox"){

			a[i].onclick = doit;

		}

	}	

}

</script>

<div>xx</div>

<div>

	<input type="checkbox" name="ck" value="1">

	<input type="checkbox" name="ck" value="2">

	<input type="checkbox" name="ck" value="3">

	<input type="checkbox" name="ck" value="4">

</div>

<div>xx</div>

<div>

	<input type="checkbox" name="ck1" value="1">

	<input type="checkbox" name="ck1" value="2">

	<input type="checkbox" name="ck1" value="3">

	<input type="checkbox" name="ck1" value="4">

</div>

<div>xx</div>

<div>

	<input type="checkbox" name="ck2" value="1">

	<input type="checkbox" name="ck2" value="2">

	<input type="checkbox" name="ck2" value="3">

	<input type="checkbox" name="ck2" value="4">

</div>
ZPH2254 2011-11-23
  • 打赏
  • 举报
 回复
首先你要会CSS，当点击按钮的时候，把那一行的CSS样式是设置为你需要的就可以了
js实现的简单选项卡特效
js实现的简单选项卡特效。自由切换。喜欢的朋友欢迎下载
js 实现 最简单的漂移特效
js 实现 最简单的漂移特效! 值得下载看看!资源免费,大家分享!!
js 实现 最简单的时间日期特效
js 实现 最简单的时间日期特效! 值得下载看看!资源免费,大家分享!!
用html+css+js实现的一个简单的图片切换特效
主要介绍了用html+css+js实现的一个简单的图片切换特效,需要的朋友可以参考下
JS实现的表单简单拖拽特效源码.zip
JS实现的表单简单拖拽特效源码.zip
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章