如何用js代碼檢查一個頁面中的所有單選框？

這是單選框的代碼。

<div class="question-answer">/span>
    <label style="margin: 10px;"/span>>
        <span class="kt-font-bolder"/span>> 1</span>
        <br>/span>
        < input name="2"/span> type="radio" label="1"/span> value="1"/span>> 
    </label> 

    <label style="margin: 10px;"> 
        <span class="kt-font-bolder"/span>> 2</span>
        <br>/span>
        < input name="2"/span> type="radio" label="2" value="2"> 
    </label> 

    <label style="margin: 10px;"> 
        <span class="kt-font-bolder"/span>> 3</span>
        <br>/span>
        < input name="2"/span> type="radio" label="3" value="3"> 
    </label> 

    <label style="margin: 10px;"> 
        <span class="kt-font-bolder"/span>> 4</span>
        <br>/span>
        < input name="2"/span> type="radio" label="4" value="4"> 
    </label> 

    <label style="margin: 10px;"> 
        <span class="kt-font-bolder"/span>> 5</span>
        <br>/span>
        < input name="2"/span> type="radio" label="5" value="5"> 
    </label> 

    <br>/span>

    <span style="color: rgb(128, 0, 0);"></span>
</div> 

在一個頁面中，有將近20個代碼相同的問題。我怎樣才能用js代碼檢查radiobox中的所有3個問題？誰能幫助我呢？

uj5u.com熱心網友回復：

你可以試試document.querySelectorAll，通過使用css選擇器，如.question-answer input[type="radio"][value="3"]，找到你要的元素。然后你可以遍歷這個串列，并將checked屬性設定為true。

const inputElementsWith3 = document. querySelectorAll('.question-answer input[type="radio"][value="3"] ')。
inputElementsWith3.forEach(function(radio) { radio.checked = true; }) ;

uj5u.com熱心網友回復：

我相信checkbox是一個更合適的元素，你可以使用document.querySelectorAll。

下面是一個作業例子，說明了checkbox和radio選擇所有checkbox和radio之間的區別。

const radioElements = document. querySelectorAll("input[type=radio]")

const checkboxElements = document.querySelectorAll("input[type=checkbox]")

radioElements.forEach(span class="hljs-params">radio => radio.checked =true)
checkboxElements.forEach(checkbox => checkbox。 checked = true）

<div class="question-answer"/span>>
  <label style="margin: 10px;"/span>>
        <span class="kt-font-bolder"/span>> 1</span>
        < input name="2"/span> type="radio" label="1"/span> value="1"/span>> 
    </label> 
  <br>/span>
  <label style="margin: 10px;"> 
        <span class="kt-font-bolder"/span>> 2</span>
        < input name="2"/span> type="radio" label="2"/span> value="2"/span>> 
    </label> 
  <br>/span>
  <label style="margin: 10px;"> 
        <span class="kt-font-bolder"/span>> 3</span>
     
        < input name="2"/span> type="radio" label="3" value="3"> 
    </label> 
  <br>/span>
  <label style="margin: 10px;"/span>>
        <span class="kt-font-bolder"/span>> 4</span>
        < input name="2"  type="radio" label="4" value="4"> 
    </label> 
  <br>/span>
  <label style="margin: 10px;"> 
        <span class="kt-font-bolder"/span>> 5</span>
        < input name="2"/span> type="radio" label="5" value="5"> 
    </label> 
  <br>/span>
  <span style="color: rgb(128, 0, 0);"></span>
</div>/span>


<div class="question-answer"> 
  <label style="margin: 10px;"/span>>
        <span class="kt-font-bolder"/span>> 1</span>
        < input name="2"  type="checkbox" label="1" value="1"> 
    </label> 
  <br>/span>
  <label style="margin: 10px;"> 
        <span class="kt-font-bolder"/span>> 2</span>
        < input name="2"  type="checkbox" label="2"/span> value="2"/span>> 
    </label> 
  <br>/span>
  <label style="margin: 10px;"> 
        <span class="kt-font-bolder"/span>> 3</span>
        < input name="2"  type="checkbox" label="3"/span> value="3"/span>> 
    </label> 
  <br>/span>
  <label style="margin: 10px;"> 
        <span class="kt-font-bolder"/span>> 4</span>
        < input name="2"  type="checkbox" label="4"/span> value="4"/span>> 
    </label> 
  <br>/span>
  <label style="margin: 10px;"/span>>
        <span class="kt-font-bolder"/span>> 5</span>
        < input name="2"  type="checkbox" label="5"/span> value="5"/span>> 
    </label> 
  <br><span style="color: rgb(128, 0, 0);"></span>
</div>/span>

標籤：

上一篇：SCSS父選擇器不作業

下一篇：JavaScript。使用HTML檔案來制作組件？