在js中单选框和复选框获取值的方式

在javascript中获取单选框和复选框的值，可以使用以下几种方法：

获取单选框的值

使用document.getElementsByName()

可以使用document.getElementsByName()方法获取单选框的值。这个方法会返回一个nodeList表示所有带有特定name属性的元素。

<form id="myForm">
  <label>男<input type="radio" name="gender" value="male"></label>
  <label>女<input type="radio" name="gender" value="female"></label>
</form>

const form = document.getElementById('myForm');
const genders = form.getElementsByName('gender');
let selectedGender;
for(let gender of genders){
    if(gender.checked){
        selectedGender = gender.value;
        break;
    }
}
console.log(selectedGender);

使用querySelector()

可以使用querySelector()方法获取单选框的值。这个方法会返回一个节点表示满足特定条件的第一个元素。

<form id="myForm">
  <label>男<input type="radio" name="gender" value="male"></label>
  <label>女<input type="radio" name="gender" value="female"></label>
</form>

const selectedGender = document.querySelector('input[name="gender"]:checked').value;
console.log(selectedGender);

获取复选框的值

使用document.getElementsByName()

可以使用document.getElementsByName()方法获取复选框的值。这个方法会返回一个nodeList表示所有带有特定name属性的元素。

<form id="myForm">
  <label>喜欢运动<input type="checkbox" name="hobby" value="sports"></label>
  <label>喜欢唱歌<input type="checkbox" name="hobby" value="singing"></label>
  <label>喜欢跳舞<input type="checkbox" name="hobby" value="dancing"></label>
</form>

const form = document.getElementById('myForm');
const hobbies = form.getElementsByName('hobby');
let selectedHobbies = [];
for(let hobby of hobbies){
    if(hobby.checked){
        selectedHobbies.push(hobby.value);
    }
}
console.log(selectedHobbies);

使用querySelectorAll()

可以使用querySelectorAll()方法获取复选框的值。这个方法会返回一个nodeList表示满足特定条件的所有元素。

<form id="myForm">
  <label>喜欢运动<input type="checkbox" name="hobby" value="sports"></label>
  <label>喜欢唱歌<input type="checkbox" name="hobby" value="singing"></label>
  <label>喜欢跳舞<input type="checkbox" name="hobby" value="dancing"></label>
</form>

const selectedHobbies = Array.from(document.querySelectorAll('input[name="hobby"]:checked')).map(h => h.value);
console.log(selectedHobbies);

以上是获取js中单选框和复选框的值的两种方法的示例。