Question

当用户取消选中复选框时，我想清除输入字段（文本框）的值。

当用户在字段中输入内容时，我想勾选复选框。

编辑：有趣的是你如何得到downvotes来完成StackOverflow推荐的内容： http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/

Answer 1

使用此HTML：

<input id="thecheckbox" type="checkbox">
<input id="theinput" type="text">

您可以使用此javascript：

$("#theinput").keyup(function () {
    if ($(this).val() == "") {
        $("#thecheckbox").prop("checked", false);
    } else {
        $("#thecheckbox").prop("checked", true);
    }
});

$("#thecheckbox").change(function () {
    if (!$(this).is(':checked')) {
        $("#theinput").val("");
    }
});

使用键盘进行标签和/或选中复选框时，它可以正常工作。

http://jsfiddle.net/B39Yq/

Answer 2

<强> HTML

<input id="text"/>
<input type="checkbox" id="check"/>

<强>的Javascript

$("#text").keyup(function(){
    $("#check").get(0).checked = !!$(this).val().trim();
});

$("#check").click(function(){
    (this.checked) ? "":$("#text").val("");
});

JS小提琴： http://jsfiddle.net/p5u64/1/

Answer 3

function onKeyUp(event) {
  var target = event.target;
  if (target.nodeName && target.nodeName.toLowerCase() === "input") {
    if (target.type && target.type == "text") {
      changeCheckboxes(this, target.value)
    }
  }
}

function onChange(event) {
  var target = event.target;
  if (target.nodeName && target.nodeName.toLowerCase() === "input") {
    if (target.type && target.type == "checkbox" && !this.checked) {
      clearTextfields(this);
    }
  }
}

function clearTextfields(form) {
  var elements = form.elements;
  for (i = elements.length; i--;) {
    if (elements[i].type === "text") {
      elements[i].value = "";
    }
  }
}

function changeCheckboxes(form, check) {
  var elements = form.elements;
  for (i = elements.length; i--;) {
    if (elements[i].type === "checkbox") {
      elements[i].checked = check;
    }
  }
}

var form = document.forms[0];
form.addEventListener("keyup", onKeyUp);
form.addEventListener("change", onChange);
form.addEventListener("click", onChange);

当输入字段（文本框）具有值时，选中/取消选中复选框

3 个答案: