typescript 判斷單選按鈕的選擇狀態(tài)，核心在于獲取單選按鈕的 checked 屬性。這看似簡(jiǎn)單，實(shí)際操作中卻有一些細(xì)節(jié)需要注意，稍有不慎就會(huì)掉進(jìn)坑里。

我曾經(jīng)在開發(fā)一個(gè)用戶調(diào)查問卷系統(tǒng)時(shí)，就遇到過這個(gè)問題。問卷里有多個(gè)單選題，每個(gè)單選題下有多個(gè)選項(xiàng)，每個(gè)選項(xiàng)都是一個(gè)單選按鈕。當(dāng)時(shí)我直接用 document.querySelector 獲取單選按鈕，再判斷 checked 屬性。代碼寫起來(lái)很快，但測(cè)試時(shí)卻發(fā)現(xiàn)，只有第一個(gè)單選題能正確判斷，后面的都失效了。

問題出在 document.querySelector 的選擇器上。我最初的代碼只使用了單選按鈕的 name 屬性作為選擇器，但多個(gè)單選題的選項(xiàng)都使用了相同的 name 屬性。document.querySelector 只會(huì)返回第一個(gè)匹配的元素，導(dǎo)致后面的單選按鈕無(wú)法正確判斷。

解決這個(gè)問題的關(guān)鍵在于，給每個(gè)單選按鈕賦予唯一的標(biāo)識(shí)符。我修改了代碼，為每個(gè)單選按鈕添加了一個(gè)唯一的 id 屬性，并使用 document.getElementById 獲取單選按鈕。這樣，就能準(zhǔn)確地判斷每個(gè)單選按鈕的選擇狀態(tài)了。

下面是一個(gè)修正后的例子，假設(shè)我們有三個(gè)單選題，每個(gè)單選題有兩個(gè)選項(xiàng)：

// HTML 結(jié)構(gòu)示例 (請(qǐng)注意每個(gè)單選按鈕的唯一id)
<div>
  <input type="radio" id="question1-option1" name="question1" value="option1"> Option 1
  <input type="radio" id="question1-option2" name="question1" value="option2"> Option 2
</div>
<div>
  <input type="radio" id="question2-option1" name="question2" value="option1"> Option 1
  <input type="radio" id="question2-option2" name="question2" value="option2"> Option 2
</div>
<div>
  <input type="radio" id="question3-option1" name="question3" value="option1"> Option 1
  <input type="radio" id="question3-option2" name="question3" value="option2"> Option 2
</div>

// TypeScript 代碼
function getSelectedValue(questionId: string): string | null {
  const selectedOption = document.querySelector(`input[name="${questionId}"]:checked`);
  return selectedOption ? (selectedOption as HTMLInputElement).value : null;
}

// 獲取第一個(gè)問題的選擇結(jié)果
const question1Answer = getSelectedValue("question1");
console.log("Question 1 answer:", question1Answer);

// 獲取第二個(gè)問題的選擇結(jié)果
const question2Answer = getSelectedValue("question2");
console.log("Question 2 answer:", question2Answer);

//依次類推...

登錄后復(fù)制

這段代碼使用了更通用的 querySelector 方法，并通過模板字面量動(dòng)態(tài)生成選擇器，避免了之前只使用 name 屬性帶來(lái)的問題。 getSelectedValue 函數(shù)返回選中的值，如果沒有選中任何選項(xiàng)則返回 null，增強(qiáng)了代碼的健壯性。 記住，確保你的 HTML 中每個(gè)單選按鈕都有一個(gè)唯一的 id，這是正確判斷的關(guān)鍵。 通過這種方式，你就能可靠地獲取 TypeScript 中單選按鈕的選擇狀態(tài)了。

路由網(wǎng)(www.lu-you.com)您可以查閱其它相關(guān)文章！