与input有关的一些操作

Posted 2020-10-09 与你在巅峰相会

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了与input有关的一些操作相关的知识，希望对你有一定的参考价值。

单选：通过name指定为一组，只能选择一个一组一个选项

<input type="radio" value="1" name="sex"/>男
<input type="radio" value="0" name="sex"/>女<br/>

两个input时：

Js中判断哪一个被选中：

首先，通过input中的name属性值查到该组对象。

var gender=document.getElementsByName("sex");  是一个数组

然后，在根据每个对象的checded属（true 或者false）来判断选中与否。

if(gender[0].checked){//下标法取出数组中的值
      alert("你选中了男性");

  }
  if(gender[1].checked){
      alert("你选中了女性");
  }

最后，通过每个对象的value方法取到值。

if(gender[0].checked){//下标法
     alert("你选中了男性:"+gender[0].value);//取出数组中的值
  }
  if(gender[1].checked){
  alert("你选中了男性:"+gender[1].value);//取出数组中的值
        }

多个单选框时：

<input type="radio" value="yinger" name="Person"/>婴儿
  <input type="radio" value="shaonian" name="Person"/>少年<b/>
  <input type="radio" value="qingnian" name="Person"/>青年
  <input type="radio" value="zhognnain" name="Person"/>中年<br/>

首先，通过name获取元素是一个数组

var pers=document.getElementsByName("Person");

然后，循环+操作

for(var i=0;i<pers.length;i++){
    if(pers[i].checked){
alert("你选中的是："+pers[i].value);
break；//选中一个就可以跳出来
    }
}

使用开关变量的实质：

首先，定义一个默认的布尔值,一般为全局。

然后，在真正的操作中改变这个布尔值

最后，在真正的操作之外，进行判断在操作其他

例如：

 /*单选有多个input时*/
var pers=document.getElementsByName("Person");
var flag=true;//1标志
for(var i=0;i<pers.length;i++){
    if(pers[i].checked){
flag=false;//2改变
alert("你选中的是："+pers[i].value);
break;
    }
}
if(flag){//3判断
    alert("你没有选中");
    return false;
}

复选：通过name指定为一组，但是可以同时选择多个一组多个选项

<input type="checkbox" name="vehicle" value="Bike"> 1<br>
<input type="checkbox" name="vehicle" value="2">2<br>
<input type="checkbox" name="vehicle" value="3">3

下拉：通name指定为一组，value指定不同的值一组一个选项

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>