一、方法介紹?

????????第一種方法：通過獲取dom元素，getElementById、querySelector、getElementsByName、querySelectorAll（需要遍歷，例如：for循環(huán)）

????????第二種是用v-model在input復(fù)選框上綁定一個變量，通過雙向綁定的特性來判斷復(fù)選框是否被選中。（推薦使用）

二、演示：

第一種：被選中輸出true，否則為false

document.getElementById()

html：

<input type="checkbox" id="myCheckbox">

js：

let checkbox = document.getElementById("myCheckbox");
console.log(checkbox.checked); // 輸出 true 或 false

document.querySelector()?

html:

<input type="checkbox" class="myCheckbox">

js:

let checkbox = document.querySelector('.myCheckbox');
console.log(checkbox.checked); // 輸出 true 或 false

document.getElementsByName() 可以獲取多個，多個用for循環(huán)

html：?

<input type="checkbox" name="myCheckbox">
<input type="checkbox" name="myCheckbox">

js：

let checkboxes = document.getElementsByName("myCheckbox");
for (let i = 0; i < checkboxes.length; i++) {
  console.log(checkboxes[i].checked); // 輸出 true 或 false
}

querySelectorAll()

html:

<input type="checkbox">
<input type="checkbox">

js:?

let checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < checkboxes.length; i++) {
  console.log(checkboxes[i].checked); // 輸出 true 或 false
}

第二種：

html：

<input type="checkbox" class="apply-checkbox" v-model="checkboxIsChecked">

?js：在data中聲明變量checkboxIsChecked:false 未選中

data(){
    return{
          checkboxIsChecked:false,
    }
}

在你做任何其他操作的時(shí)候判斷checkboxIsChecked的值，如果為true表明選中了，再進(jìn)行后續(xù)操作。比如：點(diǎn)擊事件checkClick()中輸出checkboxIsChecked的值

    checkClick(){
      console.log(this.checkboxIsChecked);
    }

選中輸出true、未選中輸出false。

checkboxIsChecked的值會隨著復(fù)選框的選中與否實(shí)時(shí)改變。文章來源地址http://www.zghlxwxcb.cn/news/detail-771274.html

到了這里，關(guān)于vue中獲取復(fù)選框是否被選中的值、如何用JavaScript判斷復(fù)選框是否被選中的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！