Блог

Главная - Вопросы по программированию - передать значение флажка с флажком в javascript

передать значение флажка с флажком в javascript

#javascript #html

#javascript #HTML

Вопрос:

Это флажки в моем 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;
}

Я не понимаю, как это сделать, не могли бы вы помочь мне здесь.

Комментарии:

1. Даже если вы хотите отобразить только 2 параметра, хотите ли вы, чтобы пользователь также выбирал все 3 параметра радио?

2. @Gautham, предполагая, что пользователь выбирает только два варианта — затем нажимает кнопку. Есть много вариантов, но я включил только три, чтобы избежать длинного вопроса.

Ответ №1:

Вы можете выбрать первые два проверенных ввода с [...document.querySelectorAll( ":checked" )].slice( 0, 2 ); помощью .

Что он делает, так это создает массив из списка узлов, составленного из всех элементов, соответствующих :checked псевдоклассу, и нарезает его в новый массив из двух элементов.

Затем вам просто нужно захватить .value найденные элементы <input>:

 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>

Если вы хотите, чтобы он выполнял поиск только в содержимом определенного элемента, вам просто нужно сделать селектор CSS querySelectorAll более конкретным.

Ответ №2:

Вы можете использовать что-то вроде следующего:

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

Это делает массив из интересующего списка узлов, отфильтровывает все непроверенные элементы и возвращает массив, который будет иметь ноль или более значений в зависимости от того, что проверено. Затем вы можете .join() или иным образом поступить так, как считаете нужным.

Ответ №3:

по сути, radio — это список узлов, поэтому вы можете сделать это

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