【前端JS】radio 可单选可点击取消选中
普通情况下 radio 单选框仅仅能实现多选一的效果,可是一旦选择当中一个后,这个单选框就不可点击取消其选中状态了。这样的功能在某些业务环境下并不适用。有时我们既须要单选框的多选一效果。也须要复选框的可点击取消效果。为此本文提供一种 JQuery 写法。
/*
1. 取消与当前控件name 相同的全部控件的选中状态
2. 选中当前控件
3. 假设当前控件在点击前是选中状态,则点击后取消其选中状态
*/
$("input:radio").click(function(){
var domName = $(this).attr('name');//获取当前单选框控件name 属性值
var checkedState = $(this).attr('checked');//记录当前选中状态
$("input:radio[name='" + domName + "']").attr('checked',false);//1.
$(this).attr('checked',true);//2.
if(checkedState == 'checked'){
$(this).attr('checked',false); //3.
}
});
这里把 radio 换成 checkbox 也能得到相同效果。
在前文所设的需求下,我们仅仅须要取到 0 个或 1 个值。因此为取值方便考虑,本文推荐使用 radio 。
End .
【前端JS】radio 可单选可点击取消选中的更多相关文章
- jquery 实现 单选框点击取消
<label for="1" class="z-label"> <input type="radio" class=&qu ...
- 前端之 JS 实现全选、反选、取消选中
需求 制作如下可选表格,实现“全选”.“反选”.“取消”功能 代码示例 <!DOCTYPE html> <html lang="zh-CN"> <he ...
- 单个单选框radio 点击选中点击取消选中
$("input:radio").click(function(){ var domName = $(this).attr('name');//获取当前单选框控件name 属性值 ...
- 用js实现超链接导航菜单点击切换选中时的状态
项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了 ...
- js 判断 undefined,单选 以及下拉框选中状态
name = $(this).attr("title"); if(typeof(name) == 'undefined'){ alert(1); } typeof 函数 radio ...
- element-ui radio 再次点击取消选中
<el-radio-group v-model="radio2"> <el-radio @click.native.prevent="clickitem ...
- jquery点击选中,再次点击取消选中
if(!$(this).hasClass("current")){ $(this).addClass("current"); }else{ $(this).re ...
- jquery checkbox点击选中,再点击取消选中
if(n==1){ if($("#abs1").is(':checked')){ $("#abs1").prop("checked",fal ...
- 点击盒子选中里面的单选框,并给盒子添加相应样式,美化单选框、复选框样式css用法,响应式滴
pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
随机推荐
- BZOJ 4568 [Scoi2016]幸运数字 ——线性基 倍增
[题目分析] 考虑异或的最大值,维护线性基就可以了. 但是有多次的询问,树剖或者倍增都可以. 想了想树剖动辄数百行的代码. 算了,我还是写倍增吧. 注:被位运算和大于号的优先级坑了一次,QaQ [代码 ...
- [POJ2778]DNA Sequence(AC自动机 + DP + 矩阵优化)
传送门 AC自动机加DP就不说了 注意到 m <= 10,所以模式串很少. 而 n 很大就需要 log 的算法,很容易想到矩阵. 但是该怎么构建? 还是矩阵 A(i,j) = ∑A(i,k) * ...
- P1373 小a和uim之大逃离 (动态规划)
题目背景 小a和uim来到雨林中探险.突然一阵北风吹来,一片乌云从北部天边急涌过来,还伴着一道道闪电,一阵阵雷声.刹那间,狂风大作,乌云布满了天空,紧接着豆大的雨点从天空中打落下来,只见前方出现了一个 ...
- bzoj1610 [Usaco2008 Feb]Line连线游戏 几何+暴力
Description Farmer John最近发明了一个游戏,来考验自命不凡的贝茜.游戏开始的时 候,FJ会给贝茜一块画着N (2 <= N <= 200)个不重合的点的木板,其中第i ...
- spring aop在mvc的controller中加入切面无效
spring aop在mvc的controller中加入切面无效 因为MVC的controller,aop默认使用jdk代理.要使用cglib代理. 在spring-mybatis.xml配置文件中加 ...
- 对象数据源objectdatasource的使用,类的编写实现查询增删改的方法
原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...
- elasticsearch起步
elasticsearch教程 elastic入门教程 阮一峰的elasticsearch教程 elasticsearch官网 kibana用户手册 elasticsearch安装步骤 参考:http ...
- Android Service服务-(转)
Service是Android系统中提供的四大组件之一.它是运行在后台的一种服务,一般声明周期较长,不直接与用户进行交互. 服务不能自己运行,需要通过调用Context.startService( ...
- poj - 2186 Popular Cows && poj - 2553 The Bottom of a Graph (强连通)
http://poj.org/problem?id=2186 给定n头牛,m个关系,每个关系a,b表示a认为b是受欢迎的,但是不代表b认为a是受欢迎的,关系之间还有传递性,假如a->b,b-&g ...
- hdu - 1269 迷宫城堡 (强连通裸题)
http://acm.hdu.edu.cn/showproblem.php?pid=1269 判断一个图是不是强连通,缩点之后判断顶点数是不是为1即可. #include <iostream&g ...