Question

我正在尝试在表单文本输入字段旁边有一个复选框。可以正常选中/取消选中该复选框，但是，当单击文本输入字段时，也应该自动选中该复选框。

我尝试通过将文本输入置于复选框的标签内来进行此操作，但这不起作用。当我使用普通文本而不是输入字段时，它工作正常：

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

如何使用HTML / JS实现呢？我正在使用VueJS插件。

Answer 1

您可以使用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 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

<input>（焦点和开始编辑）的点击操作会覆盖<label>，因此您必须使用JS：

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

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

Answer 4

您可以通过在文本字段上设置onclick属性来轻松做到这一点，例如：

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

Answer 5

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

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

单击另一个表单输入字段时，自动选中复选框

5 个答案: