jQuery模仿单选按钮选中效果

正文实例陈诉了jquery达成选中单选按键下拉伸缩效果的主意。分享给我们供大家参谋。具体如下:

jQuery模仿单选按键选中效用,jquery模仿单选开关

刚起先学jquery,工作中有个别css表单中的开关美化很辛劳,所以想着用jquery来替换,复选框的jquery很轻松,正是轻松的体制切换效果,用toggleClass()方法就能够。

而单选框以前一贯不通晓如何做,因为在单选框中选中一个,其余的都无法不移除掉样式,要是2个单选框在同级中则用siblings()则可直接找到别的单选框移除掉样式就能够。鉴于本人干活儿是循环列表方式,各种<li>里面都含有三个单选框,未发掘jquery中parent()那几个好用的章程,以至于纠结了半天。

css如下:

<!DOCTYPE html>
<html class="area">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>设置-收货地址</title>
<link rel="stylesheet" href="../css/app.css">
<script src="../js/jquery.js"></script>
//<![CDATA[
<script>
$(function(){
//改变样式同时改变右边的文字
$("span.zdy-icon-radio").click(function(){
$(this).addClass("active").text("默认地址")
.parent().parent().parent().siblings().find("span.zdy-icon-radio").removeClass("active").text("设为默认");
});
})
//]]>
</script>
<style>
.bjsc-lf span{float: left;}
.bjsc-lf > span:last-child{line-height: 2.1rem;}
.zdy-icon-radio{display:block;width: 30%rem; height: 2.15rem;margin-right: 1rem;padding-left: 3.15rem;line-height: 2.15rem;
font-family:"微软雅黑";float: left;background:url(../img/checkRight.jpg) no-repeat;background-size: 2.1rem 2.1rem;;}
.bjsc-rt{float: right;}
.zdy-icon-radio.active{background: url(../img/checked.png) no-repeat;background-size: 2.1rem 2.1rem;color: #f08417;}
</style>
</head>
<body>
<div class="xp-content02">
<div class="tt02">
编辑地址
</div>
<div class="bianji-dizhi">
<div class="tt09">
15354656536
苏定芳
</div> 
<div class="your-adress02">
南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
</div>
<div class="bianji-shanchu mui-clearfix">
<div class="bjsc-lf mui-clearfix">
默认地址
</div>
<div class="bjsc-rt">
编辑
删除
</div>
</div>
</div>
<div class="greybg02"></div>
<div class="bianji-dizhi">
<div class="tt09">
15354656536
苏定芳
</div> 
<div class="your-adress02">
南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
</div>
<div class="bianji-shanchu mui-clearfix">
<div class="bjsc-lf">
设为默认 
</div>
<div class="bjsc-rt">
编辑
删除
</div>
</div>
</div>
<div class="greybg02"></div>
<div class="bianji-dizhi">
<div class="tt09">
15354656536
苏定芳
</div> 
<div class="your-adress02">
南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
</div>
<div class="bianji-shanchu mui-clearfix">
<div class="bjsc-lf">
设为默认 
</div>
<div class="bjsc-rt">
编辑
删除
</div>
</div>
</div>
<div class="greybg02"></div>
</body>
</html>

成效如下:无论如何都不得不两个丰硕样式,侧边文字也随点击改动。

图片 1

以上所述是笔者给大家介绍的jQuery模仿单选开关选中功能,希望对大家有着帮忙,假使大家有别的疑问请给自个儿留言,笔者会及时过来我们的。在此也特别多谢大家对帮客之家网站的支持!

刚开头学jquery,专门的工作中稍微css表单中的开关美化很麻烦,所以想着用jquery来替换,复选框的…

刚开头学jquery,职业中稍加css表单中的按键美化很麻烦,所以想着用jquery来替换,复选框的jquery很轻易,正是简单的体制切换效果,用toggleClass()方法就可以。

上篇博客写的是复选框的,此番写的是单选框的,有时查询的时候,只好选取一条记下,假设将当选的那条记下的行高亮突显,同时该行的单选开关也被选中了,那样会增进顾客的体会的。前段时间的时代,正是客商体验的时代。

上篇博客写的是复选框的,这一次写的是单选框的,一时查询的时候,只好选取一条记下,假若将入选的那条记下的行高亮展现,同一时间该行的单选按钮也被选中了,那样会拉长客商的体会的。近日的一世,就是顾客体验的一世。

那是贰个应用jQuery插件完结的伸缩效果,在网页上,单击单选开关,也等于Radio元素后,所属的呼应内容向下拉出,伸打开来,通常是不显得的,可用在收据打字与印刷快递单查询等场合。

而单选框之前一贯不晓得怎么办,因为在单选框中选中四个,其余的都必得移除掉样式,假诺2个单选框在同级中则用siblings()则可一直找到任何单选框移除掉样式就能够。鉴于本身工作是循环列表形式,每一个<li>里面都包蕴一个单选框,未察觉jquery中parent()那么些好用的艺术,以致于纠结了半天。

效果与利益如下:
CSS文件如下如下所示:

功效如下:
CSS文件如下如下所示:

运作效果如下图所示:

css如下:

复制代码 代码如下:

复制代码 代码如下:

图片 2

<!DOCTYPE html>
<html class="area">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>设置-收货地址</title>
<link rel="stylesheet" href="../css/app.css">
<script src="../js/jquery.js"></script>
//<![CDATA[
<script>
$(function(){
//改变样式同时改变右边的文字
$("span.zdy-icon-radio").click(function(){
$(this).addClass("active").text("默认地址")
.parent().parent().parent().siblings().find("span.zdy-icon-radio").removeClass("active").text("设为默认");
});
})
//]]>
</script>
<style>
.bjsc-lf span{float: left;}
.bjsc-lf > span:last-child{line-height: 2.1rem;}
.zdy-icon-radio{display:block;width: 30%rem; height: 2.15rem;margin-right: 1rem;padding-left: 3.15rem;line-height: 2.15rem;
font-family:"微软雅黑";float: left;background:url(../img/checkRight.jpg) no-repeat;background-size: 2.1rem 2.1rem;;}
.bjsc-rt{float: right;}
.zdy-icon-radio.active{background: url(../img/checked.png) no-repeat;background-size: 2.1rem 2.1rem;color: #f08417;}
</style>
</head>
<body>
<div class="xp-content02">
<div class="tt02">
编辑地址
</div>
<div class="bianji-dizhi">
<div class="tt09">
15354656536
苏定芳
</div> 
<div class="your-adress02">
南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
</div>
<div class="bianji-shanchu mui-clearfix">
<div class="bjsc-lf mui-clearfix">
默认地址
</div>
<div class="bjsc-rt">
编辑
删除
</div>
</div>
</div>
<div class="greybg02"></div>
<div class="bianji-dizhi">
<div class="tt09">
15354656536
苏定芳
</div> 
<div class="your-adress02">
南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
</div>
<div class="bianji-shanchu mui-clearfix">
<div class="bjsc-lf">
设为默认 
</div>
<div class="bjsc-rt">
编辑
删除
</div>
</div>
</div>
<div class="greybg02"></div>
<div class="bianji-dizhi">
<div class="tt09">
15354656536
苏定芳
</div> 
<div class="your-adress02">
南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
</div>
<div class="bianji-shanchu mui-clearfix">
<div class="bjsc-lf">
设为默认 
</div>
<div class="bjsc-rt">
编辑
删除
</div>
</div>
</div>
<div class="greybg02"></div>
</body>
</html>

.selected{
background:#FF6500;
color:#fff;
}:

.selected{
background:#FF6500;
color:#fff;
}:

图片 3

功用如下:无论怎样都不得不八个抬高样式,侧边文字也随点击改造。

本次的js文件的代码就变得更简约了,如下所示:

本次的js文件的代码就变得更简明了,如下所示:

切实代码如下:

图片 4

复制代码 代码如下:

复制代码 代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉伸缩效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body,ul,li,h1,h2,h3{margin:0px; padding:0;}
li{list-style:none;}
.m-collapsed, .m-expanded{margin-bottom: 20px;}
.m-collapsed div{display: none;}
.m-collapsed h3{background-color: #F1F1F1; color: #FF3399; cursor: pointer; font-size: 16px; height: 30px; line-height: 30px; padding-left: 20px;}
.m-collapsed h3 span{color: #333333; font-size: 14px; font-weight: normal; padding-left: 20px;}
.m-expanded{border: 1px solid #F691C3; padding: 10px 20px 20px;}
.m-expanded h3{color: #FF3399; cursor: pointer; font-size: 16px; margin-bottom: 20px;}
.m-expanded h3 span{display: none;}
</style>
<script type="text/javascript">
$(document).ready(function(){
   var $tree_li = $("ul.tree li > h3")
   $tree_li.click(function(){   
    var index = $tree_li.index(this);
    var $div = $("ul.tree li h3").eq(index).next("div");  
    if($div.is(":visible")){
      $(this).parent().attr("class","m-collapsed");
      $div.hide();
      $(this).find("input[type='checkbox']").removeAttr("checked","checked");
    }else{
      $(this).parent().attr("class","m-expanded");
      $div.show();
      $(this).find("input[type='checkbox']").attr("checked","checked");
    }
  return false;
   })
 })
</script>
</head>
<body>
<h1>下拉伸缩效果带复选框</h1>
<div >
<ul class="tree">
 <li class="m-collapsed">
  <h3><input name="" type="checkbox" value="" />  索要发票</h3>
  <div class="mt20">
   <div style="height:116px" class="pop-red-content noborder">
   <div class="mt5 receipt-option"> 发票抬头: 
    <input type="radio" checked="checked" value="P" name="radio-title" id="title-p">
    <label class="ml5" for="title-p">个人</label>

    <input type="radio" value="C" name="radio-title" id="title-g">
    <label class="ml5" for="title-g">单位</label>
     </div>
   <div class="mt10 gname clearfix">
    <div id="div1">
    <label class="fl" for="g-name">单位名称:</label>
    <input type="text" maxlength="50" name="g-name" id="g-name" style="width:200px; height:21px; line-height:21px;">
     </div>
   </div>
   <div class="mt10 receipt-option clearfix">
    <label class="fl" for="receipt-cata">发票内容:</label>
    <select id="drpInvoiceType" name="drpInvoiceType">
    <option value="">明细</option>
    <option value="FS">服装服饰</option>
    <option value="BG">办公用品</option>
    </select>
   </div>
   <div class="ml60 mt10">
    <input type="submit" value="提交">
   </div>
   </div>
  </div>
  </li>
 </ul>
</div>
</body>
</html>

如上所述是作者给大家介绍的jQuery模仿单选开关选中功用,希望对我们持有支持,假诺大家有别的疑问请给自个儿留言,作者会及时还原我们的。在此也非常谢谢我们对台本之家网址的援助!

/**
* 设置含有单选按键的报表的背景颜色
*/
$(document).ready(function()
{
/**
* 表格单击的时候改动背景观
*/
$(“#tablight tr:gt(0)”).click(function() //获取第2行及之后的
{
$(this).addClass(“selected”).siblings().removeClass(“selected”).end().find(“:radio”).attr(“checked”,true);
});
});

/**
* 设置含有单选开关的报表的背景颜色
*/
$(document).ready(function()
{
/**
* 表格单击的时候退换背景观
*/
$(“#tablight tr:gt(0)”).click(function() //获取第2行及现在的
{
$(this).addClass(“selected”).siblings().removeClass(“selected”).end().find(“:radio”).attr(“checked”,true);
});
});

指望本文所述对大家的jquery程序设计有着帮忙。

你大概感兴趣的稿子:

  • jquery实现带单选按键的报表行选中时高亮彰显
  • JQuery操作单选开关以及复选按键示例
  • 听新闻说jquery自定义的卓绝单选开关RadioButton
  • JQuery
    radio(单选开关)操作方法汇总
  • jquery剖断单选按钮radio是还是不是选中的章程
  • jquery完结选中单选按键下拉伸缩效果
  • 依靠Jquery easyui
    选中一定的tab
  • jQuery设置单选开关radio选中/不可用的实例代码

比如想要使代码生效,供给给表格加上id属性,属性值为“tablight”。那个只要办好了,只要在用的时候引用那五个公文就行了。

假诺想要使代码生效,需求给表格加上id属性,属性值为“tablight”。这几个只要办好了,只要在用的时候引用那四个公文就行了。

你可能感兴趣的稿子:

  • jquery实现带单选开关的表格行选中时高亮彰显
  • JQuery操作单选按键以及复选开关示例
  • 依赖jquery自定义的美丽单选开关RadioButton
  • JQuery
    radio(单选按键)操作方法汇总
  • jquery推断单选按键radio是还是不是选中的章程
  • 依照Jquery easyui
    选中一定的tab
  • jQuery模仿单选按键选中功用
  • jQuery设置单选按键radio选中/不可用的实例代码

您或然感兴趣的稿子:

  • jQuery完结table隔行换色和鼠标经过变色的两种艺术
  • jQuery实现表格隔行及滑动,点击时变色的方式【测量试验可用】
  • jQuery轻巧实现表格的隔行变色和点击行变色的实例代码
  • jQuery插件完毕表格隔行变色及鼠标滑过高亮显示效果代码
  • jQuery插件达成表格隔行换色且感应鼠标高亮行变色
  • 用JQuery落成表格隔行变色和优良展示当前行的代码
  • jQuery
    表格隔行变色代码[考订注释版]
  • jquery属性选拔器not has怎么写
    行悬停高亮显示
  • jquery完结带复选框的报表行选中去除时高亮展现
  • JQuery操作表格(隔行着色,高亮呈现,筛选数据)
  • jQuery实现Table表格隔行变色及高亮展现当前采取行效果示例

相关文章