js 操作单选框

最新推荐文章于 2024-08-25 21:44:45 发布
最新推荐文章于 2024-08-25 21:44:45 发布
阅读量886 收藏
点赞数
分类专栏： web开发 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yixian918/article/details/24266765
版权
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content=""><script type="text/javascript">
  <!--
         /*
          *功能：居住在海南选"是"，城市选"海口"，选否，则不选城市
          */
         function check(){
                   var province = document.getElementsByName("province");//省份
                   var a;
                   var provinceValue;
                   for(a=0; a<province.length; a++){//遍历单选框
                            if(province[a].checked){
                                  provinceValue = province[a].value;
                            }
             }
                   var city = document.getElementsByName("city");//城市
                   var i;
                   if(provinceValue==1){
                            for(i=0; i<city.length; i++){//遍历单选框
                                     if(city[i].value==1){
                                               city[i].checked = "checked";
                                     }
                            }
                   }else{
                            for(i=0; i<city.length; i++){//遍历单选框
                                     if(city[i].checked){
                                               city[i].checked = "";
                                     }
                            }
                   }
         }
 
         /*
          *功能：居住在海南选"是"，城市选择除海口之外的城市都会弹出提示并选择海口
          */
    function doCheckedCity(){
                   var province = document.getElementsByName("province");//省份
                   var a;
                   var provinceValue;
                   for(a=0; a<province.length; a++){//遍历单选框
                           if(province[a].checked){
                                   provinceValue = province[a].value;
                            }
             }
                   var city = document.getElementsByName("city");//城市
                   var i;
                   if(provinceValue==1){
                            for(i=0; i<city.length; i++){//遍历单选框
                                     if(city[i].checked && city[i].value!=1){
                                               city[i].checked = "";
                                               alert("居住在海南选择'是'，则城市只能选择海口");
                                     }
                            }
                            for(i=0; i<city.length; i++){//遍历单选框
                                     if(city[i].value==1){
                                               city[i].checked = "checked";
                                     }
                            }
                   }else{
                            for(i=0; i<city.length; i++){//遍历单选框
                                     if(city[i].checked && city[i].value==1){
                                               city[i].checked = "";
                                               alert("居住在海南选择'否'，则城市不能选择海口");
                                     }
                            }       
                   }
         }
  //-->
  </script>
 </head>
 <body>
         居住在海南：
         <input type="radio" id="province" name="province" value="1" οnclick="check()" checked="checked" >是
         <input type="radio" id="province" name="province" value="0" οnclick="check()" >否
         <br>
         城市：
         <input type="radio" id="city" name="city" value="1" οnclick="doCheckedCity()" checked="checked" >海口
         <input type="radio" id="city" name="city" value="2" οnclick="doCheckedCity()" >上海
         <input type="radio" id="city" name="city" value="3" οnclick="doCheckedCity()" >北京
         <input type="radio" id="city" name="city" value="4" οnclick="doCheckedCity()" >武汉
 </body>
</html>
雪翊寒
关注
专栏目录
JS基础：使用原生js封装一个单选框
CHENBIN的博客
03-22 853
使用原生js封装一个单选框（导航栏）
JavaScript单选框选择操作
P7295的博客
05-16 6559
废话不多说来看原图： 当点击全选按钮的时候，项目复选框全高亮，反之字面意思 反选则为当前勾选项目取消，无勾选项目则被勾选。 步骤 一.写入html内容 input type属性值要改为"checkbox"单选框。 二.写入JavaScript实现功能 在button按钮属性值里设置各自id， 在JavaScript中通过文档获取到该id， 绑定点击事件，for循环遍历所有单选框， 遍历的数组集通过改变属性值的布尔值来显示高亮效果。 反选按钮需要做一个有效的判断来确定...
js操作单选框
weixin_34038652的博客
09-02 160
2019独角兽企业重金招聘Python工程师标准>>> ...
JS基础知识总结
最新发布
2401_83342251的博客
08-25 1141
button onclick="alert('再点一下')">点一下</button>（推荐学习中使用）通过script标签引入（推荐开发中使用）编写JS代码在外部的.JS文件中，然后再通过script标签引入eg：alert("我是外联引入") <script src="./3.1.1js的三种引入方式.js"></script>注：单行注释//:一般写在单行代码之后多行注释：一般写在方法和类之前 /*注释内容*/或 /**注释内容*/
js控制单选复选框（全选)
weixin_33782386的博客
03-17 265
//获取单选按钮的选项值 function f1() { //radio集合 var radios = document.getElementsByName("sex"); for (var i = 0; i < radios.length; i++) { ...
js实现单选框的选择
dawuafang
08-09 587
整体功能：居住在海南选"是"，则城市默认选择"海口"；居住在海南选"否"，则不选城市；如果居住在海南选择了"是"，则城市选择除"海口"外的选择则弹出提示并选择海口，如果居住在海南选择了"否"，则城市选择海口时弹出提示且不能选择。这里有个小小优化，不选择海口且城市选择之前选择的，如何实现呢？ &lt;html&gt; &lt;head&gt; &a
js操作单选框radio
zunguitiancheng的专栏
06-27 3476
Untitled Document                      #contentid{                 display:none;             }                          #no1ul{                 list-style:none;                 margin:0px;   
js获取单选框或复选框值及操作
10-27
在JavaScript中，获取单选框或复选框的值是一项常见的任务，特别是在处理用户输入或者构建表单提交功能时。本文将详细介绍如何使用JavaScript来获取这些控件的值，并进行一些基本的操作。 首先，让我们来看一下如何...
javascript 单选框，多选框美化代码
10-30
【JavaScript 单选框与多选框美化技术详解】 在网页设计中，为了提升用户体验，对表单元素如单选框（radio）和多选框（checkbox）进行美化是常见的需求。JavaScript 提供了强大的能力来操作这些元素，实现美观且...
js下获得单选框的值的代码
01-19
JavaScript提供了多种方法来操作DOM（Document Object Model），包括获取单选框的值。最常用的方法是`querySelectorAll()`和`forEach()`。 **示例代码**： ```javascript // 获取所有名为"gender"的单选框 var ...
JS面向对象——多选框的实现
进击的葱
01-11 340
描述： JS面向对象——多选框的实现 效果： 实现： Utile.js (function () { Object.prototype.addProto=function (sourceObj) { var names=Object.getOwnPropertyNames(sourceObj); for(var i=0;i&lt;names....
js是某个单选框选中_Js单选框选中状态
weixin_39772652的博客
01-27 1615
引用来自“milin”的评论直接用jquery好了，写的那么麻烦 以下代码取自：JS, JQUERY实现全选，反选。 其中，我将 改成： 测试一下，似乎正是你所要的效果。水果苹果香蕉橘子//给所有 .box input 元素添加 checked = ckAll 当前的状态；//prop('checked',value) ,第一个值获取属性，第二个值：设置属性值。prop只有一个参数时，表示获...
js针对单选按钮的处理
我爱编程持之以恒
02-14 541
用户登录html中radio代码 <div style="height:20px; margin-top: 10px;"> 用户类型： <input name="loginType" type="radio" class="dxwz" value="40" />教师&nbsp;&nbsp; <input name="loginType"...
js的单选框的选中
a1033479126的博客
12-29 2129
无标题文档  /*------判断radio是否有选中，获取选中的值--------*/     $(function(){          $("#btnSubmit").click(function(){             var val=$('input:radio[name="ss"]:checked').val();             if(val==nu
怎么用js来控制单选框是否有效？
sunking18的专栏
05-19 1077
<br />       上传<br /><br /><br />      手填<br /><br /><br /> 这样的效果，可以把DEMO的代码 帖出来吗？<br /> 选定一个后，另外一个就不能添加东西了，提交进去数据库 的时候，灰色的那个文本框里面的东西就不会提交~<br /> <br /> <br /> <br /> <br />一般思维简单DEMO<br /><br /> <script language="javascript"><br /> function sel(se
利用原生js和jQuery实现单选框的勾选和取消操作
热门推荐
祥哥的专栏--每一天
08-30 1万+
根据一下的Demo，大概就可以看的明白 Demo:<html> <head> <script src='jquery-1.9.1.min.js'></script> <script> window.onload = function(){ var dom_a = document.getElementById('a1'); var dom_b = docum
JS单选框，搜索框，选择框简单案例
DyjBuild的博客
12-04 667
【代码】JS单选框，搜索框，选择框简单案例。
html js 单选框,JS面向对象之单选框实现
weixin_39712865的博客
06-04 655
本文实例为大家分享了JS面向对象之单选框实现代码，供大家参考，具体内容如下描述：JS面向对象——单选框的实现效果：实现：Utile.js(function () {Object.prototype.addProto=function (sourceObj) {var names=Object.getOwnPropertyNames(sourceObj);for(var i=0;ivar desc=...
利用JavaScript控制单选框
程序员最佳实践
12-04 284
&lt;script&gt; function f(index){ var x=document.getElementsByName("radiobutton"); for(var i=0;i&lt;x.length;i++){ if(x[i].value==index) { x[i].checked=true; break; } } } &lt;/script&gt; ...
JS面向对象：详解单选框实现与扩展
在JavaScript面向对象编程中，单选框的实现是一个常见的基础操作，它涉及到DOM操作和类的继承。本文将深入讲解如何使用面向对象的方法来设计和管理单选框组件。首先，我们回顾一下什么是面向对象（OOP）：这是一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值