Автоматически ставить галочку при нажатии на другое поле ввода формы

Question

Я пытаюсь установить флажок рядом с полем ввода текста формы. Флажок можно включить / выключить, как обычно, однако при нажатии на поле ввода текста флажок также должен быть автоматически отмечен.

Я пробовал это, поместив текстовый ввод внутри метки для флажка , но это не работает. Он отлично работает, когда я использую обычный текст вместо поля ввода:

<input type="checkbox" id="box">
<label for="box">
  <input type="text">
</label>

Как я могу добиться этого с помощью HTML / JS? Я работаю в контексте плагина VueJS.

Answer 1

Щелчок <input> (фокус и начало редактирования) отменяет <label>, поэтому вам придется использовать JS:

document.querySelector('#text').addEventListener('click', ()=>{
  document.querySelector('#box').checked=true
})

<input type="checkbox" id="box">
<input type="text" id="text">

Answer 2

Просто добавьте слушателя к текстовому вводу, который установит флажок.

const checkbox = document.querySelector('#box');
const input = document.querySelector('input[type="text"]');

input.addEventListener('click', () => {
  checkbox.checked = true;
});

<input type="checkbox" id="box">
<label for="box">
  <input type="text">
</label>

Answer 3

вы можете использовать jquery для этого:

HTML:

<input type="checkbox" id="box">
<label for="box"></label>
<input type="text" id="mytextinput">

JQuery:

$('#mytextinput').focus(function(){
$('#box').prop( "checked", true ); // true checks the checkbox false unchecks.
});

Answer 4

    document.querySelector("#box").addEventListener('click',function(){
        document.querySelector("#checkbox").checked = true;
    });

    <div>
        <input type="checkbox" id="checkbox">
        <input type="text" id="box">
    </div>

Answer 5

Это легко сделать, установив атрибут onclick в текстовом поле, например:

<input type="checkbox" id="box">
<label for="box">
  <input type="text" onclick="box.checked = true">
</label>