jquery Reset the Radio box and the input box

Source: Internet
Author: User

Uncheck the box radio, the first, the second way is implemented using jquery, the third Way is based on JS and DOM implementation, you can look at the following example

This article provides three ways to uncheck Radio, with the following code examples:

This article relies on jquery, the first of which, the second is implemented using jquery, and the third approach is based on the JS and Dom implementations.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 6667 <!DOCTYPE HTML> <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> <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>

Cancel

$ ('. 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");

});

jquery Reset the Radio box and the input box

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.