Naviguer dom en utilisant jquery pour obtenir des éléments spécifiques

Question

J'essaie d'utiliser les parents/frères de jquery pour trouver des éléments d'entrée particuliers, mais je n'arrive pas à le comprendre.

J'ai le code HTML suivant:

<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: Quand quelqu'un cochée une case à cocher Je veux la zone de texte dans le même div.selectItem d'avoir un « 1 » mis. Si elles décochent la case, je veux que la valeur soit supprimée.

Q2: Je souhaite également que la case à cocher soit cochée si une valeur est entrée dans la zone de texte et non cochée si la zone de texte est vide.

Merci pour votre aide.

Answer 1

Quelque chose comme ça devrait fonctionner. (Non testé pour la syntaxe précise, mais l'algorithme est solide.)

// 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

Cela fonctionne avec votre balisage (testé):

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