在javascript中傳遞選中的復選框值

Question

這是我的 HTML 中的復選框：

<input type="checkbox" name="sides" id="1" value="French Fries" >French Fries<br />
<input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
<input type="checkbox" name="sides" id="3"  value="Cole Slaw">Cole Slaw<br />
<input type ="button" value = "Enter my side dish selections" onclick="checkbox(sides.value1,sides.value2)"/>

我想要的是當用戶單擊按鈕時，它應該先選中兩個復選框，然后將其顯示為：

function checkbox(dish1,dish2) {
  document.getElementById("side_one").innerHTML = dish1;
  document.getElementById("side_two").innerHTML = dish1;
}

我對如何做到這一點感到困惑，你能在這里幫助我嗎？

Answer 1

您可以使用[...document.querySelectorAll( ":checked" )].slice( 0, 2 );選擇前兩個選中的輸入[...document.querySelectorAll( ":checked" )].slice( 0, 2 ); .

它的作用是從 NodeList 創建一個 Array，它由與:checked偽類匹配的所有元素組成，並將其切片為兩個項目的新 Array。

然后你只需要獲取找到的 <input> 元素的.value ：

 document.querySelector('[type="button"]').onclick = (evt) => { const checked = [...document.querySelectorAll( ":checked" )].slice( 0, 2 ); checkbox( ...checked.map( (input) => input.value ) ) }; function checkbox(dish1 = "", dish2 = "") { document.getElementById("side_one").innerHTML = dish1; document.getElementById("side_two").innerHTML = dish2; }

 <input type="checkbox" name="sides" id="1" value="French Fries" >French Fries<br /> <input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br /> <input type="checkbox" name="sides" id="3" value="Cole Slaw">Cole Slaw<br /> <input type ="button" value = "Enter my side dish selections"/> <p id="side_one"></p> <p id="side_two"></p>

如果你希望它只在特定元素的內容中搜索，你只需要讓querySelectorAll的 CSS 選擇器更加具體。

Answer 2

您可以使用以下內容：

Array.from(document.getElementsByName('entree')).filter(input => input.checked).map(input => input.value)

這會使數組脫離感興趣的節點列表，過濾掉所有未檢查的元素並返回一個數組，該數組將根據檢查的內容具有零個或多個值。 然后你可以 .join() 它或以其他方式做你認為合適的事情。

Answer 3

基本上，收音機是一個節點列表，所以你可以這樣做

const radioValue = (radio.length > 0) ? radio[0].value : "";