更新答案

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>

Answer 2

更新答案

嗨，我只是更新我的答案，所以如果取消选中你的函数就会运行并获得复选框

的值

<input type="checkbox" checked value="1" onclick="myFunction(this)" />
<input type="checkbox" checked value="2" onclick="myFunction(this)" />
<input type="checkbox" checked value="3" onclick="myFunction(this)" />
<input type="checkbox" checked value="4" onclick="myFunction(this)" />

<script>
    function myFunction(e) {

        if(e.checked == false) {
            alert('this box unchecked | value = ' + e.value);
        }
    }
</script>

Answer 3

您可以创建单独的功能

function OnChangeCheckbox1(checkbox) {
..
}

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

function OnChangeCheckbox2(checkbox) {
..
}

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

Answer 4

<div class="check_filter">

    <div id="filter">
        <input type="checkbox" id="check1" /><label for="check1">XYZ</label>
        <input type="checkbox" id="check2" /><label for="check2">WAS</label>
        <input type="checkbox" id="check3" /><label for="check3">DEF</label>
    </div>

</div>

Js代码：

$(document).ready(function() {    
  $(":checkbox").click(function(){
        var id = $(this).attr('id');
        var isChecked = $(this).attr('checked'));
       if(isChecked == false){
switch (id) {
    case check1:
        txtbox1();
        break; 
    case check2:
       txtbox2();
        break; 
    default: 
        defaultFunction();
}
}
    });    
});

html＆amp; javascript：多个复选框为多个文本框运行相同的功能

4 个答案:

更新答案