点击选中，再次点击取消选中的单选以及复选效果怎么实现？？？_jquery吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：35,233贴子：
点击选中，再次点击取消选中的单选以及复选效果怎么实现？？？收藏
在移动端或者PC端，点击选中，再次点击取消选中某一项的单选以及复选效果，怎么实现？？？？类似于下图，求大神指教
[SALOON索龙]服装整烫及配套设备的一次革命!!!
$(&你要点击的对象&).click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).addClass('active');
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或欢迎加入我们，一同切磋技术。 &
用户名： &&&
密　码： &
共有 2412 人关注过本帖
标题：JS的click事件输出html
点击一次就消失？
等　级：新手上路
&&已结贴√
&&问题点数：20&&回复次数：6&&&
JS的click事件输出html
点击一次就消失？
&script src=&jquery.js& type=&text/javascript&&&/script&
&meta charset=&utf-8&&
&form&&method=&post&&
&&&&&&&&&span&id: &input type=&text& name=&id& id=&id&/&&/span&
&&&&&&&span id=&insert&&&/span&&/div&
&&&&div& &input type=&submit&&&id=&btn&/&&/div&
&script type=&text/javascript&&
&&& $(function(){
&&&&&&&&$(&#btn&).click(function(){
&&&&&&&&&&&&val=$(&input[name='id']&).val();
&&&&&&&&&&&&$(&#insert&).html(val);
&&&&&&&&&&&// $(&#id&).after($newlist);
&&&&&&&&&&&&//alert(val);
&&&&&&&&});
搜索更多相关主题的帖子:
等　级：新手上路
我想把那个值打印出来
来　自：北京
等　级：版主
威　望：120
帖　子：8067
专家分：6655
document.getElementByID('btn').onclick = function(){
&&& document.getElementByID('insert').innerHTML = document.getElementByID('id').
这样就搞定了，一定要用jQuery吗？
本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
来　自：北京
等　级：版主
威　望：120
帖　子：8067
专家分：6655
当然如果你一定要用Jquery，那就这么写
(function(){
&&& $(&#btn&).click(function(){
&&&&&&&&$(&#insert&).html($(&#id&).val());
你写的val=$(&input[name='id']&).val();中有两个地方需要吐槽一下
1、val变量一定要用var定义，否则会val就将是全局变量，是非常不好的习惯，这样会和其他代码造成不可预想的冲突，切记切记！
2、input[name='id']少用这样的查找方式，你都定义id属性了，为什么不用？你这样写将会在页面中所有DOM元素（就是标签）中遍历查找，是非常浪费资源的，能够精确定位就少用查找，不是说不能用你这种方式，但是你应该将这种查找定位在一个相对狭小的空间内，比如在&span&id: &input type=&text& name=&id& id=&id&/&&/span&中给span标签加个id，然后在这个span中查找，会快的多。
本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
来　自：北京
等　级：版主
威　望：120
帖　子：8067
专家分：6655
还有个槽点，$(function(){，这句中加什么$符号啊，jQuery中有这样的用法吗？$这个符号是作为css选择器使用的，不是用来定义匿名函数的！
本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
版权所有，并保留所有权利。
Powered by , Processed in 0.021346 second(s), 8 queries.
Copyright&, BCCN.NET, All Rights Reserved后使用快捷导航没有帐号？
只需一步，快速开始
查看: 50620|回复: 8
jQuery收缩与展开特效（如何设置默认隐藏，点击展示？）
UID203126在线时间 小时积分110帖子离线17155 天注册时间
初级会员, 积分 110, 距离下一级还需 90 积分
代码如下：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/charset=utf-8& /&
&title&jquery 收缩展开效果&/title&
&script type=&text/javascript& src=&/skins/2012/js/jquery1.3.2.js&&&/script&
/* 收缩展开效果 */
.text{line-height:22padding:0 6color:#666;}
.box h1{padding-left:10height:22line-height:22background:#f1f1f1;font-weight:}
.box{position:border:1px solid #e7e7e7;}
&script type=&text/javascript&&
// 收缩展开效果
$(document).ready(function(){
$(&.box h1&).toggle(function(){
$(this).next(&.text&).animate({height: 'toggle', opacity: 'toggle'}, &slow&);
},function(){
$(this).next(&.text&).animate({height: 'toggle', opacity: 'toggle'}, &slow&);
&!-- 收缩展开效果 --&
&div class=&box&&
&h1&收缩展开效果&/h1&
&div class=&text&&
&div class=&box&&
&h1&收缩展开效果&/h1&
&div class=&text&&
第一次运行请刷新一下页面。
&提示：您可以先修改部分代码再运行
现在默认的是页面加载时，所有的元素都是展示的，点击后隐藏。
我希望的效果是页面加载时，所有的元素都是隐藏的，点击后再展示~~~
UID503469在线时间 小时积分1827帖子离线17155 天注册时间
银牌会员, 积分 1827, 距离下一级还需 1173 积分
本帖最后由 pxh0829 于
22:48 编辑
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/charset=utf-8& /&
&title&jquery 收缩展开效果&/title&
&script type=&text/javascript& src=&/skins/2012/js/jquery1.3.2.js&&&/script&
/* 收缩展开效果 */
.text{line-height:22padding:0 6color:#666;}
.box h1{padding-left:10height:22line-height:22background:#f1f1f1;font-weight:}
.box{position:border:1px solid #e7e7e7;}
&script type=&text/javascript&&
// 收缩展开效果
$(document).ready(function(){
// $(&.box h1&).toggle(function(){
$(this).next(&.text&).animate({height: 'toggle', opacity: 'toggle'}, &slow&);
},function(){
//$(this).next(&.text&).animate({height: 'toggle', opacity: 'toggle'}, &slow&);
$(&div.text&).hide();//默认隐藏div，或者在样式表中添加.text{display:none}，推荐使用后者
$(&.box h1&).click(function(){
$(this).next(&.text&).slideToggle(&slow&);
&!-- 收缩展开效果 --&
&div class=&box&&
&h1&收缩展开效果&/h1&
&div class=&text&&
&div class=&box&&
&h1&收缩展开效果&/h1&
&div class=&text&&
第一次运行请刷新一下页面。
&提示：您可以先修改部分代码再运行
UID203126在线时间 小时积分110帖子离线17155 天注册时间
初级会员, 积分 110, 距离下一级还需 90 积分
UID355442在线时间 小时积分515帖子离线17155 天注册时间
高级会员, 积分 515, 距离下一级还需 485 积分
留个脚印，学习，以后用得上
UID608661在线时间 小时积分30帖子离线17155 天注册时间
新手上路, 积分 30, 距离下一级还需 20 积分
animate里height的值可以用toggle，第一次见到，原来这么神奇，学习了。
UID609688在线时间 小时积分383帖子离线17155 天注册时间
中级会员, 积分 383, 距离下一级还需 117 积分
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/charset=utf-8& /&
&title&jquery 收缩展开效果&/title&
&script type=&text/javascript& src=&/skins/2012/js/jquery1.3.2.js&&&/script&
/* 收缩展开效果 */
.text{line-height:22padding:0 6color:#666;display:}
.box h1{padding-left:10height:22line-height:22background:#f1f1f1;font-weight:}
.box{position:border:1px solid #e7e7e7;}
&script type=&text/javascript&&
// 收缩展开效果
$(document).ready(function(){
$(&.box h1&).toggle(function(){
$(this).next(&.text&).animate({height: 'toggle', opacity: 'toggle'}, &slow&);
},function(){
$(this).next(&.text&).animate({height: 'toggle', opacity: 'toggle'}, &slow&);
&!-- 收缩展开效果 --&
&div class=&box&&
&h1&收缩展开效果&/h1&
&div class=&text&&
&div class=&box&&
&h1&收缩展开效果&/h1&
&div class=&text&&
第一次运行请刷新一下页面。
&提示：您可以先修改部分代码再运行
UID568965在线时间 小时积分73帖子离线17155 天注册时间
初级会员, 积分 73, 距离下一级还需 127 积分
一般情况下，直接用slideToggle，代码最少
UID644584在线时间 小时积分19帖子离线17155 天注册时间
新手上路, 积分 19, 距离下一级还需 31 积分
网页设计培训
UID498521在线时间 小时积分1818帖子离线17155 天注册时间
银牌会员, 积分 1818, 距离下一级还需 1182 积分
您好，请教一下：这个效果，如何改一下，实现：第一个层展开时，浮在下面的内容上面，而不是下面的内容向下移动。
Powered by