当前位置:首页 > jQuery技术文章 > 取消选中单选框radio的三种方式示例介绍

分享三种取消选中单选框radio的方法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:65

这篇文章主要知识点是关于单选框、radio、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery Mobile从入门到精通
  • 类型:jQuery大小:168.7 MB格式:PDF作者:未来科技
立即下载

取消选中单选框radio的三种方式示例介绍

本文提供了三种取消选中radio的方式,代码示例如下:

本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的。
 

<!DOCTYPE HTML>
<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">
$(function(){
//
var $browsers = $("input[name=browser]");
var $cancel = $("#cancel");
var $byhide = $("#byhide");
var $remove = $("#remove");
//
$cancel.click(function(e){
// 移除属性,两种方式都可
//$browsers.removeAttr("checked");
$browsers.attr("checked",false);
});
//
$byhide.click(function(e){
// 切换到一个隐藏域,两种方式均可
//$("#hidebrowser").attr("checked",true);
$("#hidebrowser").attr("checked","checked");
});
//
$remove.click(function(e){
// 直接去的DOM元素,移除属性
// 如果不使用jQuery,则可以移植此方式
var checkedbrowser=document.getElementsByName("browser");
/*
$.each(checkedbrowser, function(i,v){
v.checked = false;
v.removeAttribute("checked");
});
*/
//
var len = checkedbrowser.length;
var i = 0;
for(; i < len; i++){
// 必须先赋值为false,再移除属性
checkedbrowser[i].checked = false;
// 不移除属性也可以
//checkedbrowser[i].removeAttribute("checked");
}

});
});
</script>
</head>
<body>
<p>您喜欢哪款浏览器?</p>

<form>
<input id="hidebrowser" type="radio" name="browser" value="">
<input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" value="Firefox">Firefox<br />
<input type="radio" name="browser" value="Netscape">Netscape<br />
<input type="radio" name="browser" value="Opera">Opera<br />
<br />
<input type="button" id="cancel" value="取消选中方式1" size="20">
<input type="button" id="byhide" value="取消选中方式2" size="20">
<input type="button" id="remove" value="取消选中方式3" size="20">
</form>

</body>
</html>

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

idea2020注册激活码(激活到2100年)

实例分析Java实现的zip压缩及解压缩工具类

python3 pandas 如何读取MySQL数据和插入

ThinkPHP3.2.3框架如何实现分页功能

深入理解JS函数stack size计算方法

展开 +

收起 -

jQuery 相关电子书
学习笔记
网友NO.491112

解决layui的使用以及针对select、radio等表单组件不显示的问题

layui是国内一款界面比较整洁大方的ui框架,里面封装了很多前端开发常用的组件,通常我们直接复制代码过去就可以实现效果,可以提高我们的开发效率。 使用步骤: 1、下载layui:https://www.layui.com 2、将layui文件夹复制到自己的项目里: 3、在html页面引入相关的css和js: link rel="stylesheet" type="text/css" href="/layui/css/layui.css" rel="external nofollow" media="all" //路径仅供参考script type="text/javascript" src="/layui/layui.js"/script //路径仅供参考 4、我们除了直接复制组件代码过来使用外,也可以参考他们的开发文档,了解更多更详细的使用方法: 相关开发文档:https://www.layui.com/doc form表单select、radio组件不显示的解决方法: 这里简单的复制了一段框架的form表单代码: !DOCTYPE htmlhtmlhead meta charset="utf-8" titlelayui/title meta name="renderer" content="webkit" meta http-equiv="X-UA-Compatible" content="……

网友NO.214037

Jquery选中或取消radio示例

JQuery获取选中的radio $('input:radio[name="sex"]:checked') Jquery选中或取消radio $("#tradeType0").attr("checked","checked"); $("#tradeType1").attr("checked",false);……

网友NO.324191

jQuery 操作input中radio的技巧

通过jQuery获取页面中的所有radio对象,遍历页面中的radio,取消选中的标签,因为使用到jQuery时间,因此引用到了网上公共的js,这只是本人的一些总结,大神勿喷。 htmlheadtitle取消/titlescript language="javascript"function _onclick() {$("input[name='ra']:checked").val();var radios = document.getElementsByName("ra");for (i = 0; i radios.length; i++) {if (radios[i].checked) {radios[i].checked=false;break;}}}function _onclick1() {var item = $("input:radio[name='ra'][checked]").val(); alert(item)var radios = $("input[name='ra']");for (i = 0; i radios.length; i++) {if (radios[i].checked) {radios[i].checked=false;break;}}}function _onclick2() {var radios = $("input[type='radio']");for (i = 0; i radios.length; i++) {if (radios[i].checked) {radios[i].checked=false;}}}/script/headbodydivolliinput type="radio" name="ra" value="1"1/liliinput type="radio" name="ra" value="2"2/liliinput type="radio" name="ra" value="3" checked3/liliinput type=……

网友NO.829246

利用jquery操作Radio方法小结

在开发中经常会用到Radio来实现用户的选择效果,我在项目中积累了一些利用JQUERY来操作Radio的方法,在这里分享一下,供有需要的朋友借鉴。 1、改变radio的选择,触发一些效果 $("input:radio[name='dialCheckResult']").change(function (){ //拨通 alert(“123”); }); 2、让页面中所有的radio可用。 $("input:radio").attr("disabled",false); 3、让页面中所有的radio不可用。 $("input:radio").attr("disabled","disabled"); 4、让某个radio置于选中状态。 $("input:radio[name='dialCheckResult']").eq(0).attr("checked",true); 5、让页面中“未选中”状态的radio不可用。 $("input:radio:not([checked])").attr("disabled","disabled"); 6、遍历选中状态的radio,除了某一个radio之外,其他的“选中”状态的radio设定是“未选中”状态。 $('input:radio:checked').each(function(i,val){ if(val.name != "dialCheckResult" ){ $("input:radio[name='"+val.name+"']:checked").attr('checked',f……

网友NO.271779

jquery 多个radio的click事件实例

如下所示: div id="ImgRadio" input type="radio" value="80*80" id="size1" name="size" checked="checked" /80*80 input type="radio" value="88*31" id="size2" name="size" /88*31 input type="radio" value="300*250" id="size3" name="size" /300*250 input type="radio" value="300*300" id="size4" name="size" /300*300 input type="radio" value="438*305" id="size5" name="size" /438*305 input type="radio" value="463*209" id="size6" name="size" /463*209 input type="radio" value="100*60" id="size7" name="size" /100*60 input type="radio" value="120*60" id="size8" name="size" /120*60 /div$("#ImgRadio :radio").click(function(){}); 以上这篇jquery 多个radio的click事件实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757