Перейдите в DOM, используя JQuery, чтобы получить на конкретные элементы - PullRequest
Новая
       10

Перейдите в DOM, используя JQuery, чтобы получить на конкретные элементы

4 голосов
/ 28 августа 2009

Я пытаюсь использовать родителей / братьев 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: Я также хочу, чтобы флажок был установлен, если значение введено в текстовое поле, и не отмечен, если текстовое поле пустое.

Спасибо за вашу помощь.

Ответы [ 2 ]

4 голосов
/ 28 августа 2009

Нечто подобное должно работать. (Не проверен на точный синтаксис, но алгоритм надежный.) 

// 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","");
  }
});
1 голос
/ 28 августа 2009

Это работает с вашей разметкой (проверено): 

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