zoukankan      html  css  js  c++  java
  • jQuery重置单选框和input框

    取消选中单选框radio,第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的,大家可以看看下面的示例

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    <!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

    取消

    $('.reset-bottom').click(function(){
    $('.mui-input-clear').attr('value','');
    $('input[name=sex]').removeAttr("checked");
    $('input[name=type]').removeAttr("checked");
    $('input[name=steelyard]').removeAttr("checked");
    $('input[name=brand]').removeAttr("checked");

    });

  • 相关阅读:
    java并发编程(五)lock
    java并发编程(一)线程状态 & 线程中断 & 线程间的协作
    java基础之 clone
    java基础 小知识点汇总篇
    java并发编程(四) 线程池 & 任务执行、终止源码分析
    GC(一)内存管理与垃圾回收
    java并发编程(三)cpu cache & 缓存一致性
    java并发编程(八) CAS & Unsafe & atomic
    @PathVariable注解
    redis分布式锁
  • 原文地址:https://www.cnblogs.com/xzzzys/p/7491111.html
Copyright © 2011-2022 走看看