一个icon的选中与不选中

页面的样式展示

1、页面中选中的状态

2、页面中未选中的状态

3、俩个icon代表的状态

页面的布局展示

                                   <label><i class="iconfont icon-danxuan1"></i><input hidden checked type="checkbox" class="checkedC" onclick="Radiochoose(this)"/><span>本人保证所填单据真实有效，并同意</span><span class="actives">《理赔须知》</span><br /><br /></label>

想法和构思

icon的选中与未选中可以用俩个不同的icon控制，为了后台好拿到值，放一个隐藏域，给input添加一个方法，判断按钮现有的样式是否是选中的，是选中的就让input的check属性为true

    function Radiochoose(_this){var label = $(_this).parent();     //找到input的父级labelvar icon = label.find('.iconfont');   //找到label下面的iconif(icon.hasClass('icon-danxuan')){    //判断是否有选中的样式icon.removeClass('icon-danxuan').addClass('icon-danxuan1');    //是选中状态的话，就移除选中状态的样式，添加未被选中的}else{icon.removeClass('icon-danxuan1').addClass('icon-danxuan');   //没有的话，移除现在的样式 ，添加选中状态的样式}}

或者是给input添加点击事件$('#checkR').click(function(){alert(123);var label = $(this).parent();console.log(label);var icon = label.find('.iconfont');if(icon.hasClass('icon-danxuan')){icon.removeClass('icon-danxuan').addClass('icon-danxuan1');}else{icon.removeClass('icon-danxuan1').addClass('icon-danxuan');}});

转载于:https://www.cnblogs.com/lml-lml/p/7879275.html

一个icon的选中与不选中相关推荐

软件测试面试题：怎么验证一个复选框是不是被选中或者未被选中？
怎么验证一个复选框是不是被选中或者未被选中? 参考答案:使用isSelected()方法,例如driver.findElement(By.id("xpath of checkbox" ...
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中
例:将多个选中的checkbox的值组装成一个字符串 <script type=text/javascript> function addMem(){ //var followers = ...
Jquery判断单选框是否选中和获取选中的值
第一种:利用选中值判断选中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
JS与CSS阻止元素被选中及清除选中的方法总结
有时候,我们希望阻止用户选中我们指定区域的文字或内容. 举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容. 再举个栗子,制作轮播组件的时候,点击下一页,若 ...
JQuery判断radio是否选中，获取选中值
2019独角兽企业重金招聘Python工程师标准>>> 他对radio操作功能,以后在添加.直接上代码,别忘记引用JQuery包 <!DOCTYPE html PUBLIC & ...
checkbox选中和不选中 jqu_jquery checkbox 选中不选中
展开全部 $(function () { // 动态绑定默认状态 // $("#ck").attr("checked",true)//选中 // $(&quo ...
JQuery判断radio是否选中并获取选中值的示例代码
这篇文章主要介绍了JQuery判断radio是否选中并获取选中值的方法,代码很简单,但很实用,需要的朋友可以参考下其他对radio操作功能,以后在添加.直接上代码,别忘记引用JQuery包 ? 1 ...
html单选按钮选中后取消选中,jquery实现单选按钮选中与取消选中
单选按钮的选中与取消选中,是元素自带的属性checked来实现的一般情况下: $("#updateApplyForSmsNotification [name='applyForSmsNot ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...

一个icon的选中与不选中

页面的样式展示

页面的布局展示

想法和构思

一个icon的选中与不选中相关推荐

最新文章

热门文章