代码之家  ›  专栏  ›  技术社区  ›  Richard Reddy

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

  •  4
  • Richard Reddy  · 技术社区  · 17 年前

    我试图使用jquery的父/同级查找特定的输入元素,但我似乎无法正确地实现这一点。

    <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 回复  |  直到 17 年前
        1
  •  4
  •   Matt Howell    17 年前

    这样的办法应该行得通。(未测试精确语法,但算法可靠。)

    // 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","");
      }
    });
    
        2
  •  1
  •   karim79    17 年前

    $(document).ready(function() {
        $('input:checkbox').change(function() {
            if($(this).is(':checked')) {
                $(this).val('1');
            } else {
                $(this).val('');
            }
        });
    
        $('input[type=text]').keyup(function() {
            if($(this).val() != "") {
                $(this).parent()
                       .parent()
                       .next('.selectIt')
                       .find('span > input:checkbox')
                       .attr('checked','checked')
                       .val('1');
            } else {
                $(this).parent()
                       .parent()
                       .next('.selectIt')
                       .find('span > input:checkbox')
                       .removeAttr('checked')
                       .val('');
            }
        });
    });