javascript - html 和 JavaScript : multiple checkboxes run same function for multiple textboxes

Question

我希望 chkbox1 为 txtbox1 调用 JavaScript 函数，chkbox2 为 txtbox2 调用相同的函数> 等等。

更进一步，我希望所有复选框都在默认状态下处于选中状态，并且我希望函数在未选中时运行。

我怎样才能实现这个目标？

我只知道一个复选框的简单方法:

function OnChangeCheckbox(checkbox) {
  if (checkbox.checked) {
    alert("The check box is checked.");
  } else {
    alert("The check box is not checked.");
  }
}

<input type="checkbox" value="yes" checked onclick="OnChangeCheckbox (this)" />
<label for="checkbox">uncheck box</label>

Answer 1

如果您的复选框和文本框有共同点，那么您可以执行以下操作:

<input type="checkbox" checked id="chk1" onclick="myFunction(this)" />
<input type="checkbox" checked id="chk2" onclick="myFunction(this)" />
<input type="checkbox" checked id="chk3" onclick="myFunction(this)" />
<input type="checkbox" checked id="chk4" onclick="myFunction(this)" />

<input type="text" id="txt1" />
<input type="text" id="txt2" />
<input type="text" id="txt3" />
<input type="text" id="txt4" />

<script>
    function myFunction(el) {
       var txt = document.getElementById(el.id.replace('chk', 'txt'));

        if(el.checked) {
            txt.value = 'checked';
        }
        else
            txt.value = 'unchecked';
    }
</script>

function myFunction(el) {
  var txt = document.getElementById(el.id.replace('chk', 'txt'));
    if(el.checked) {
      txt.value = 'checked';
    }else{
      txt.value = 'unchecked';
    }
}

<div>
  <input type="checkbox" checked id="chk1" onclick="myFunction(this)" />
  <input type="text" id="txt1" />
</div>
<div>
  <input type="checkbox" checked id="chk2" onclick="myFunction(this)" />
  <input type="text" id="txt2" />
</div>
<div>
  <input type="checkbox" checked id="chk3" onclick="myFunction(this)" />
  <input type="text" id="txt3" />
</div>
<div>
  <input type="checkbox" checked id="chk4" onclick="myFunction(this)" />
  <input type="text" id="txt4" />
</div>