js实现单选框的选择

整体功能：居住在海南选"是"，则城市默认选择"海口"；居住在海南选"否"，则不选城市；如果居住在海南选择了"是"，则城市选择除"海口"外的选择则弹出提示并选择海口，如果居住在海南选择了"否"，则城市选择海口时弹出提示且不能选择。这里有个小小优化，不选择海口且城市选择之前选择的，如何实现呢？

<html>

<head>

<title> New Document </title>

<!--

*功能：居住在海南选"是"，城市选"海口"，选否，则不选城市

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实现单选框的选择相关推荐

vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框在传统的HTM ...
js设置单选框为选中状态
js设置单选框为选中状态 HTML部分 <input type="radio" value="1" name="onlinestatus&quo ...
根据单选框的选择来决定下拉框的禁用与否
在这里插入图片描述大家可以看到,当单选框选择'否'的时候,下拉框被禁用了,而选择'是'的时候,下拉框的禁用被解除了.这是怎么做到的呢?其实很简单. 代码就是以上这些了,是不是很简单?记得一定要先引入 ...
js获取单选框里面的值
rt,如果想获取单选框里面的值,该如何获取呢. <script> window.onload = function(){ //通过名字获取 getElementsByName //var ...
原生JS获取单选框或复选框的选中值的方法
菜鸟入门篇,请各位大大忽略. Step1:从dom上获取到需要的元素,例如有一组单选框的name="sex" var inputs=document.getElementsByNa ...
设置单选框只能选择一个
单选框虽然叫单选框,但我发现如果每一个input标签里面name不写成一样的话,是可以选多个的.所以要达到只能选一个的效果,就要写name. 参考:https://blog.csdn.net/spac ...
fastadmin 单选框禁止选择
用fastadmin开发,用到单选框,然后给默认值,想让添加商品的时候是无法操作上架的,只有商品规格完善,才可以在修改里去上架商品 ,一开始是如下写法,怎么都实现不了. {:build_radios( ...
js title 单选框获取_js简单获取表单中单选按钮值的方法
本文实例讲述了js简单获取表单中单选按钮值的方法.分享给大家供大家参考,具体如下: HTML部分如下: bordercolor="#999999">回退类型: type=&q ...
AngularJs里用js控制单选框默认选中
① html页面 <div class="form-group"><label>{{'性别' | translate}}</label>< ...

js实现单选框的选择

js实现单选框的选择相关推荐

最新文章

热门文章