js实现单选按钮单击选中,再单击取消选中

如何实现js控制单选按钮,单击选中,再单击就取消选中

有多组单选按钮,且每组单选按钮的value值是不同的,如何用js实现单击选中再单击那个选中的单选按钮则取消选中
,实现方法采用javascript写在页面中,不采用jquery方法。

0

5个回答

0


var flag = true;
  function chkRadio(id) {
  id.checked = flag;
  flag = !flag;
  }

0
qq_36336328
qq_36336328 <input type="radio" name="radio" value='0' onclick="chkRadio(this);" />
接近 2 年之前 回复

写个判断 点击一下是1单数 代表选中 在点一下是2双数 代表取消选中 至于界面上如何展示选没选中 那就以按钮变颜色为主啦

0

这个是unity吗、、、

0

这个最简单的逻辑就是if判断一下就看可以了。下面是简单的例子,以变色为主,点击一下变灰色,再点击一下恢复原来的颜色。



var oDiv = document.getElementById('div1'); oDiv.onclick=function(){ if(this.style.backgroundColor == 'red'){ this.style.backgroundColor = '#ccc'; }else{ this.style.backgroundColor = 'red'; } };
-1
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
单选按钮(radio)的取消与选中
js控制单选按钮(radio)的取消与选中,javascript单选按钮
jQuery实现点击单选按钮切换选中状态效果
实现效果:第一次点击单选按钮时选中该按钮,再次点击时取消选中该单选按钮。   关键就是要将单选按钮原来的值保存起来,第二次点击时。如果原来选中则取消,否则选中。   看代码吧,是用jQuery实现的,功能虽小。知识点不少啊。。。。。     $(document).ready(function(){ var old = null; //用来保存原来的对象 $(&quot;input[n...
js再次点击事件,怎么实现点击选中,再次点击取消
  这个最简单的逻辑就是if判断一下就看可以了。下面是简单的例子,以变色为主,点击一下变黑色,再点击一下恢复原来的颜色。 &amp;lt;body&amp;gt; &amp;lt;div id=&quot;div1&quot; style=&quot;width:100px; height:100px; background:red&quot;;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/body&amp;gt; &amp;lt;script&amp;gt;
jQuery实现radio点击选中,再次点击取消选中
&lt;input type="radio" name="sex" value="0" &gt;女 &lt;input type="radio" name="sex" value="1" &gt;男 $('input:radio').click(function(){ var $radio = $(this); // if this was previo...
radio点击,第一次点击选中,再次点击取消选中
&amp;lt;div&amp;gt; &amp;lt;input type=&quot;radio&quot; id=&quot;defualtAdd&quot; name=&quot;defualtAdd&quot;&amp;gt;默认地址 &amp;lt;/div&amp;gt; &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; var isDefualtAdd = 0; //0不选中,1选中 $('input:radio'
单选框radio单击取消选中
&amp;lt;!DOCTYPE HTML&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot; /&amp;gt; &amp;lt;script type=&quot;text/javascript&quot; src=&quot;http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js&quot;&amp;gt;
单选按钮radio点击已选中的取消选中 。
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $('input[name="cker"]').bind('change',function(){ $('input[name="cker"]'
radio单选框(点击选中,再次点击取消)
一般在查询或注册使用的都是多value多个单选项框即:&amp;lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;man&quot;/&amp;gt;男 &amp;lt;inpuut type=&quot;radio&quot; name =&quot;sex&quot; value=&quot;woman&quot;/&amp;gt;女但是,查询有时候也会遇到多value一个选项框,例如: &amp;lt;td i
jquery实现单选按钮选中与取消选中
单选按钮的选中与取消选中,是元素自带的属性checked来实现的 一般情况下: $("#updateApplyForSmsNotification [name='applyForSmsNotification']").eq(0).attr('checked', 'checked'); 这个方法就可以满足实现将其第一个单选按钮选中。 但是如果这个是根据后台传到页面的值来实现的一个动态单选按钮
JAVASCRIPT之单选按钮,双击取消选中
JAVASCRIPT之单选按钮,双击取消选中
用Axure实现单选按钮交互效果,点击展开,在点击一次关闭的效果
用Axure实现单选按钮交互效果,比如我们点击按钮,展开内容,再点击一次则内容影城起来,并且加上动画效果.有详细的图文结合
radio选中与再次点击取消选中效果
在做考试系统的时候,因为有不定项选择题的原因,导致radio不是很好用,网上找了一圈方法,好像都不太能适用于动态的添加radio对象,所以在原BLOG的基础上稍微做了一点点修改 代码如下:     function radioClick(event) {                 var domName = $(this).attr('name');                 ...
单选按钮radio点击已选中的,取消选中
var tempradio= null; function cancel(checkedRadio){       if(tempradio== checkedRadio){           tempradio.checked=false;           tempradio=null;         }else{              tempradio= check
Listview点击选中,双击取消选中
在Listview布局文件中加入choicemode = “singleChoice”即可实现点击item的选中效果。 如果不想要选中效果只需要myList.setSelector(new ColorDrawable(Color.TRANSPARENT)); 但是默认效果的问题是单击某个item选中之后,再点击一次,并没有去掉选中的效果。 我目前的解决方法是通过position判断是否选中相...
vue多个列表点击一次选中,双击取消
遍历出data里面的数据 v-for 给li加点击事件 绑定class样式怎么控制样式的显示 通过 class的控制v:bind:class={class:index==变量}下标和class变量是否相等控制truefalse 代码: &lt;div id="app"&gt; &lt;ul&gt; ...
表格变色(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式)
表格变色(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式)
table(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式)
jquery小应用
js 单选框点击选中和取消
首先是html代码,一个单选框 一个 隐藏域,便于给后台传递数据. &amp;lt;input type=&quot;checkbox&quot; calss=&quot;span4&quot;  name=&quot;randomPassword&quot; id=&quot;randomPassword&quot;  value=&quot;&quot; onclick=&quot;changeBox(this)&quot;/&amp;gt; &amp;lt;input type=&quot;hidde
easyui取消单击行选中状态
设置属性checkOnSelect:false
easyui datagrid行选中情况下,再次点击取消选中。
singleSelect:false, nowap: true, border: false, idField: 'id', columns: [[//显示的列 {field:'ck',width:50,checkbox:'true',align:'center',hidden:true} ea
QTableWidget单击选中取消
QTableWidget单击选中取消事件 前言 很多情况下有这样的需求,当鼠标点击QTableWidget时,每次只能选中一行或者不选中,不允许选中多行。当点击表格中时选中一行,同时打开所选中的这行的详细信息(另一个GUI控件),当点击表格之外,选中行取消高亮(取消选择),同时详细信息也消失。 说明 1、QTableWidget时,选择行时,可以使用  setSelectionBehav
radio点击选中,再次点击取消选中
html> head> title>单选按钮取消选中的三种方式title> script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"> script> script type="text/javascript"> $(functio
easyui combtree 单选的时候实现 再次点击取消选中
easyui combtree 单选的时候实现 再次点击取消选中 原理 就是在 select 的时候判断当前节点是否选中, 选中了的话就通过改变 节点 的class 属性来取消选中, 并且清空combotree 的值。同时 return false ,让本次 select 不能实现选中 代码如下 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;hea...
单选按钮再次点击取消选中
&lt;input name="hobbies" value="" type="radio" /&gt;唱歌 &lt;input name="hobbies" value="" type="radio" /&gt;游泳 &lt;input name="hobbies" value="" type="radio" /&gt;跑步 $(':radio')...
单选框radio点击选中、取消选中
单选框radio点击选中、取消选中
RadioButton状态选择
使用xml文件实现RadioButton的不同选择状态,展示不同显示效果的功能。
单选框 单击选中,再击取消,和 提示 选择单选框
页面: 苹果 var wxe=$("input[name='aa']:checked").val();  if(typeof(wxe)=="undefined"){ alert("请选择!"); return false; }
jquery全选 选中所有checkbox,再次点击取消全选,可以反复点击,解决了点击一次后再次点击不能选中的问题
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt;     &amp;lt;title&amp;gt;checkbox的多选&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt;      &amp;lt;table border=&quot;1&quot; id=&quot;table11&quot; width=&quot;350px&q
Android仿CheckBox可以取消选中状态的RadioButton
Android仿checkBox可以取消选中状态的RadioButtonAndroid中RadioButton和CheckBox都是CompoundButton的子View.都是用来选中状态的view,但是CheckBox可以选中后取消选中状态,但就RadioButton虽然可以用代码实现选中后取消选中状态,但太麻烦了.既然CheckBox可以实现,那通过研究RadioButton的源码再加以修改也
实现点击单选按钮后面的文字说明自动选中相应单选按钮功能
cshtml代码: 回访状态 关机、欠费、拒接、无法接通、忙音、线路忙、正在通话中 机主不在、换号非本人 空号、停机、黑名单 接通、挂机、不需要
jquery实现点击复选框,勾选所有复选框,再次点击取消全选
$("checkedID全选的ID").click(function(){ if($(this).attr("checked")){ //进行全选操作,比如3个子checkbox       for(var i=1;i                   $("input[type='checked']").eq(i).attr("checked",true);      } }e
DIV点击单选效果
//---------------html部分 &amp;lt;head&amp;gt; //自定义样式 &amp;lt;style&amp;gt;         .bgColor{            background-color: #9be7ff;         }     &amp;lt;/style&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;div class=&quot;d&quot;&amp;gt;
html中点击radio后的文字相当于选中该单选按钮如何实现?怎么实现两个redio,选中一个,取消另一个?
一:实现点击redio后面文字选中redio。代码如下:方法①:&lt;input type=&quot;radio&quot; id=&quot;clickIn&quot;/&gt; &lt;label for=&quot;clickIn&quot;&gt;点击我选中&lt;/label&gt; 解释:input标签设置ID,文字添加一个lable标签,设置一个for属性值与ID值相同即可。 方法②:&lt;label &gt; &lt;input type=&quot;radio&quot;
ListCtrl 选中 取消选中 得到选中值
ListCtrl 控件,选中,取消选中,得到选中值。简单示例,代码清晰,操作简单,完成针对功能。
微信小程序商品选择点击取消
let clickAgain = that.data.clickAgain;//data里定义的一个变量if (clickAgain == e.currentTarget.dataset.index){if (that.data.clickId == -1){that.setData({clickId: e.currentTarget.dataset.index});}else{that.setD...
jQuery 实现单选按钮(radio)勾选和取消,使用prop()代替attr() 踩坑博客
欢迎来到Altaba的博客  2017年11月1日 很多时候,我们需要原因js脚本去操控一排单选按钮,获取后台数据显示当前项的某个设置值,通过单选框显示,进而还能够通过修改勾选单选按钮去修改这个项的值,由于整个项目前端是通过jQuery实现,果断想到使用attr()方法去实现修改单选按钮checked属性,谁知道遇到一系列无法想象的奇怪问题 比如:手动修改单选按钮,后无法通过jQuery的at
C# Winform Radiobutton点击选中与再次点击未选中事件
//初始化时候 this.Radiobutton1.Checked = false;//默认未选中状态 this.Radiobutton1.AutoCheck = false //然后在Radiobutton的Click事件中写入 /// /// Name:Panda ///
实战案例1:实现单选按钮及在文本框中展示选中的按钮内容
案例1:实现单选按钮,并将单选按钮内容填充至文本框 (1)元件准备:三个单选按钮,一个button按钮,一个文本框 (2)分析:a.单选按钮的实现;                      b.将选中按钮的内容填充至文本框;                      c.在下一个选中按钮的行为产生之前,对应的单选按钮还是处于选中的状态。 操作步骤: 1.首先在左下角的图形库里选择三个...
单选按钮选中与移除input type="radio" 以及复选框等
test *{ margin:0; padding: 0; } .father{ width:500px; height: 400px; border: 1px solid red; margin:0 auto; } 男 女 下拉选框 我是1 我是2 我是3 复选框 I have a bike11  I have a bike22
DEV GridView 单击行选中/取消选中
/// /// 单击行,选中/不选中行中的checkbox(直接选checkbox不容易控制状态) /// 循环所有行,处理数据 /// /// /// private void gridView_recheckItem_RowClick(object sender, DevExpress.Xt