Вывод данных из checkbox в другой div

Question

Есть список из checkbox-ов.

При нажатии на любой из чекбоксов его данные (текст checkbox 1/2/3/4/5) выводятся в div блок. Важно, чтобы чекбокс выбирался по одному, а не несколько. Допустим нажали на checkbox 1 - он вывелся, а если нажать на checkbox 2 - checkbox 1 пропадает и на его место встаёт checkbox 2.

Answer 1

Лучшебы что-то реактивное, но вот нативный JS

const checkboxes = document.querySelectorAll('input[type=checkbox]');
const resultDiv = document.querySelector('.result__num');

const countChecked = () => Object.values(checkboxes).filter(el =>
  el.checked
).length;


const onchange = (e) => {
  resultDiv.innerText = countChecked()
}

checkboxes.forEach((checkbox) => checkbox.addEventListener('change', onchange, false))

.result {
  position: absolute;
  right: 0;
  top: 0;
  padding: 20px;
  display: flex;
  align-items: center;
}

.result__num {
  font-weight: bold;
  font-size: 2em;
  margin-left: 10px;
}

<div class="result">
  Результат: <span class="result__num">0<span>
</div>

<div>
  <input type="checkbox" name="f1" />
  <label for="f1">1</label>
</div>
<div>
  <input type="checkbox" name="f2" />
  <label for="f2">2</label>
</div>
<div>
  <input type="checkbox" name="f3" />
  <label for="f3">3</label>
</div>
<div>
  <input type="checkbox" name="f4" />
  <label for="f4">4</label>
</div>

Answer 2

Описанное поведение является естественным для input type="radio":

const output = document.getElementById('output');

onChangeValue();

function onChangeValue(){
    output.textContent = document.querySelector('input[name="rval"]:checked').value;
}

<div id="output" style="position: fixed; top: 10px; right: 10px; font-size: 24px; font-weight: bold"></div>
<input type="radio" value="radio1" onchange="onChangeValue()" name="rval" checked>
<label for="radio1">Radio1</label><br>
<input type="radio" value="radio2" onchange="onChangeValue()" name="rval">
<label for="radio2">Radio2</label><br>
<input type="radio" value="radio3" onchange="onChangeValue()" name="rval">
<label for="radio3">Radio3</label><br>
<input type="radio" value="radio4" onchange="onChangeValue()" name="rval">
<label for="radio4">Radio4</label>

Если именно checkbox нужны, то можно сымитировать:

const output = document.getElementById('output');

onChangeValue(document.querySelector('[name="rval"]:checked'));

function onChangeValue(el){
    document.querySelectorAll('[name="rval"]').forEach(inp => {
        inp.checked = false;
    });
    el.checked = true;
    output.textContent = el.value;  
}

<div id="output" style="position: fixed; top: 10px; right: 10px; font-size: 24px; font-weight: bold"></div>
<input type="checkbox" value="checkbox1" onchange="onChangeValue(this)" name="rval" checked>
<label for="checkbox1">Checkbox1</label><br>
<input type="checkbox" value="checkbox2" onchange="onChangeValue(this)" name="rval">
<label for="checkbox2">Checkbox2</label><br>
<input type="checkbox" value="checkbox3" onchange="onChangeValue(this)" name="rval">
<label for="checkbox3">Checkbox3</label><br>
<input type="checkbox" value="checkbox4" onchange="onChangeValue(this)" name="rval">
<label for="checkbox4">Checkbox4</label>

Если нужна возможность оставить без выбора:

const output = document.getElementById('output');

onChangeValue(document.querySelector('[name="rval"]:checked'));

function onChangeValue(el){
    document.querySelectorAll('[name="rval"]').forEach(inp => {
        if(el!=inp) inp.checked = false;
    });
    output.textContent = el.checked ? el.value : 'NOTHING'; 
}

<div id="output" style="position: fixed; top: 10px; right: 10px; font-size: 24px; font-weight: bold"></div>
<input type="checkbox" value="checkbox1" onchange="onChangeValue(this)" name="rval" checked>
<label for="checkbox1">Checkbox1</label><br>
<input type="checkbox" value="checkbox2" onchange="onChangeValue(this)" name="rval">
<label for="checkbox2">Checkbox2</label><br>
<input type="checkbox" value="checkbox3" onchange="onChangeValue(this)" name="rval">
<label for="checkbox3">Checkbox3</label><br>
<input type="checkbox" value="checkbox4" onchange="onChangeValue(this)" name="rval">
<label for="checkbox4">Checkbox4</label>

БЛОГ НА HUSL

Вывод данных из checkbox в другой div

Ответы (2 шт):