jquery - 使用 jquery 导航 dom 以获取特定元素

Question

我正在尝试使用 jquery 的父级/兄弟级来查找特定的输入元素，但我似乎无法做到这一点。

我有以下 HTML:

<div id="ExtrasOptions">
 <div class="selectItem">
    <div class="selectPrice"><span>Qty: <input name="qty" type="text" value="0" maxlength="2" id="qty" class="AccessoryQuantity" /></span></div>
    <div class="selectIt"><span><input name="extraselected" type="checkbox" id="extraselected" value="9" /><label for="extrasID">Add this</label></span></div>
 </div>
 <div class="selectItem">
    <div class="selectPrice"><span>Qty: <input name="qty2" type="text" value="0" maxlength="2" id="qty2" class="AccessoryQuantity" /></span></div>
    <div class="selectIt"><span><input name="extraselected2" type="checkbox" id="extraselected2" value="9" /><label for="extrasID">Add this</label></span></div>
 </div>
</div>

问题 1:当有人选中一个复选框时，我希望同一个 div.selectItem 中的文本框在其中放入“1”。如果他们取消选中复选框，我希望删除该值。

问题 2:我还希望在文本框中输入值时选中该复选框，而在文本框为空时取消选中该复选框。

感谢您的帮助。

Answer 1

像这样的东西应该可以工作。 (没有测试精确的语法，但算法是可靠的。)

// Bind an event to each of your checkboxes, for when they are clicked
$("input[type=checkbox]").click(function() {
  if ($(this).attr("checked")) {
    // The checkbox is checked, so find the associated text input and change its value
    $(this).parents(".selectItem").find("input[type=text]").val("1");
  } else {
    // The checkbox is unchecked, so find the associated text input and remove its value
    $(this).parents(".selectItem").find("input[type=text]").val("");
  }
});

// Bind an event to each of your text inputs, for when they have text entered into them
$("input[type=text]").keypress(function() {
  if ($(this).val() != "")) {
    // There is something in the text input box, so check the associated checkbox
    $(this).parents(".selectItem").find("input[type=checkbox]").attr("checked","checked");
  } else {
    // There is nothing in the text input box, so uncheck the associated checkbox
    $(this).parents(".selectItem").find("input[type=checkbox]").attr("checked","");
  }
});