Question

我们有一个table我们有三个td，如下所示：

HTML：

<table style="width:100%">
      <tr>
        <td ><input type="checkbox" name="favcolor" id="checkbox" value="red"></td>
        <td>Smith</td>      
        <td><input name="textfield" type="text" id="textfield" ></td>
      </tr>
</table>

我们需要一个函数，一旦文本字段收到任何输入，就会检查复选框。如果文本字段清除了所有输入（变为空），则复选框应再次取消选中。

有人能引导我走向正确的方向吗？

Answer 1

试试这个： -

$('#textfield').on('change',function(){
  $("#checkbox").prop('checked',$(this).val().length);
});

或者您也可以使用change。

，而不是使用keyup事件

Fiddle.

Answer 2

您可以使用像

这样的更改事件处理程序

//dom ready handler
jQuery(function($) {
  //a change event handler for the input field
  $('#textfield').change(function() {
    //based on whether the input has a value set the checked state
    $('#checkbox').prop('checked', this.value.length > 0)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <td>
      <input type="checkbox" name="favcolor" id="checkbox" value="red" />
    </td>
    <td>Smith</td>
    <td>
      <input name="textfield" type="text" id="textfield" />
    </td>
  </tr>
</table>

Answer 3

尝试使用input事件

$(function() {
  var chk = $('#checkbox');
  $('#textfield').on('input', function() { //fire as user types/drag-drop/copy-paste
    //replace all white-space and get the actual text length
    //if lenght is greater than 0, mark it else un-mark
    chk.prop('checked', this.value.replace(/\s/g, '').length);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <td>
      <input type="checkbox" name="favcolor" id="checkbox" value="red">
    </td>
    <td>Smith</td>
    <td>
      <input name="textfield" type="text" id="textfield">
    </td>
  </tr>
</table>

如何选中复选框并自动取消选中

3 个答案: