取消选中单选框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 style="display:none;" 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>

赞 (0)

相关推荐

  • Javasipt:操作radio标签详解

    1.html代码: 复制代码 代码如下: <form action="#" name="userOpinionForm" id="userOpinionForm" method="post"> <input type="radio"    name="opinionCategory" value="1" checked  />最同意      

  • 基于jquery自定义的漂亮单选按钮RadioButton

    基于jquery自定义的漂亮单选按钮RadioButton

    继续分享web前端自定义控件,今天所要分享的控件是单选按钮,希望对你有收获,有好的建议也希望能留言给我.代码如下: Html代码如下: 复制代码 代码如下: <div style="margin:50px;float:left;"> <b class="radio" _txt="单选我"></b> <b class="radio" _txt="单选你"><

  • jQuery获取Radio,CheckBox选择的Value值(示例代码)

    $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值$("#text_id").focus(function(){//code...}); //事件 当对象text_id获取焦点时触发$("#text_id").blur(function(){//code...}); //事件 当对象text_id失去焦点时触发$("#text_id").selec

  • Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)

    //如果之前有选中的,则把选中radio取消掉$("#tj_cat .pro_category").each(function(){ if ($(this).attr('checked')){                        $(this).attr('checked' ,false);                    }});//获取被选中的标签的值radio:(checkbox和这个一样) var val=$('input:radio[name="se

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

    本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的. 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <title>单选按钮取消选中的三种方式</title> <script type="text/javascript" src="http://lib.sinaapp

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

    本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的. <!DOCTYPE HTML> <html> <head> <title>单选按钮取消选中的三种方式</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jqu

  • node运行js获得输出的三种方式示例详解

    一.通过console.log输出(我最喜欢的) 1.js脚本 1.js var arguments = process.argv.splice(2); //获得入参 var a= arguments[0]; 取第一个 console.log(a) //输出 2.python脚本 test_1.py import os print(os.popen('node 1.js fuck').read()) #打印结果fuck 二.通过文件读写获取 1.js脚本 1.js //npm环境别忘了装了 va

  • 用python画圣诞树三种代码示例介绍

    用python画圣诞树三种代码示例介绍

    目录 前言 1.方块圣诞树 2.线条圣诞树 3.豪华圣诞树 总结 前言 这篇文章主要介绍了使用Python画了一棵圣诞树的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 如何用python画一个圣诞树呢? Turtle库来画圣诞树. 1.方块圣诞树 import turtle screen = turtle.Screen() screen.setup(375, 700) circle = turtle.Turtle() circle

  • Netcore Webapi返回数据的三种方式示例

    目录 ASP.NET Core为Web API控制器方法返回类型提供了如下几个选择: 1. 返回指定类型(Specific type) 2. 返回 IActionResult 实例 3. 返回 ActionResult<T> 实例 ASP.NET Core为Web API控制器方法返回类型提供了如下几个选择: Specific type IActionResult ActionResult<T> 1. 返回指定类型(Specific type) 最简单的API会返回原生的或者复杂的

  • .net中捕捉全局未处理异常的三种方式示例

    前言: 我们在实际项目开发中,经常会遇到一些不可预见的异常产生,有的异常在程序运行时就对其进行处理(try) 但是,有的程序不需要每一个地方都用try进行处理,那么针对这种情况,可以参照下面的方式,实现对异常的统一抓取处理,下面话不多说了,来一起看看详细的介绍吧. 方式一.Page_Error处理页面级未处理异常 作用域:当前的.aspx页面 描述:在需要处理的aspx页面的cs文件中,实现Page_Error方法,达到侦听当前页面未处理的异常 protected void Page_Error

  • Java实现指定线程执行顺序的三种方式示例

    Java实现指定线程执行顺序的三种方式示例

    本文实例讲述了Java实现指定线程执行顺序的三种方式.分享给大家供大家参考,具体如下: 方法一:通过共享对象锁加上可见变量来实现. public class MyService { private volatile int orderNum = 1; public synchronized void methodA() { try { while (orderNum != 1) { wait(); } for (int i = 0; i < 2; i++) { System.out.printl

  • js中创建对象的几种方式示例介绍

    JavaScript中的所有事物都是对象:字符串.数组.数值.函数等.JS中并没有类的概念, 但我们可以利用JS的语法特征,以类的思想来创建对象. 原始方法 复制代码 代码如下: <script type="text/javascript"> var obj = new Object(); obj.name = "Koji"; //为对象添加属性 obj.age = 21; obj.showName = function(){ //为对象添加方法 ale

  • python+selenium 点击单选框-radio的实现方法

    例子:以百度文库中选择文档的类型为例 问题一:遍历点击所有文档类型的单选框 # coding=utf-8 from selenium import webdriver from time import sleep driver = webdriver.Chrome() driver.maximize_window() driver.get("http://wenku.baidu.com") driver.implicitly_wait(8) for i in driver.find_e

  • jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <title>单选框radio绑定click事件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="

随机推荐