特定の要素を取得するために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> 

はQ1：誰かが私は同じdiv.selectItem内のテキストボックスに「1」、それに入れていたいのチェックボックスをチェックします。チェックボックスをオフにすると、値を削除します。

Q2：値がテキストボックスに入力されている場合はチェックボックスをオンにし、テキストボックスが空白の場合はチェックボックスをオフにします。

ありがとうございました。

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",""); 
    } 
}); 

Answer 2

これは、（テスト）マークアップで動作します：

$(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(''); 
     } 
    }); 
});