基于复选框 Jquery 更新文本框

Question

我想用 Jquery 实现以下目标

• 有多个行程，每个行程都有复选框和文本框。
• 每当检查复选框时，必须将与该复选框相对应的文本框中的值更新为“ 1”。
• 无论客户在文本框中输入什么类型，都应选中复选框。
• 客户总共不能选择超过10个行程。 （即如果两个输入框的总数都是 10 则应显示错误或警告。

我尝试了以下代码，但它不起作用

<input type="checkbox" id="ckval1" class="checkvaloare" /> Trip 1
<input type="text" id="text1" class="ckval1" size="2" />
<br />
<input type="checkbox" id="ckval2" class="checkvaloare" /> Trip 2
<input type="text" id="text2" class="ckval2" size="2" />

JQuery 如下：

$("input[type=checkbox]").click(function () {
   update();
});

function update() {
   $("input[type=text]").each(function () {
    if (($(this).is(":checked"))) {
        $(this).val(1);
    }
    else
    {
        $(this).val(0);
    }
  });
}

Answer 1

使用.next() 获取下一个兄弟元素，.prev() 获取上一个兄弟元素。

试试

$(function () {
    $("input[type=checkbox]").on('click', function () {

        $(this).next().val($(this).is(':checked') ? '1' : '0');
    });
    $("input[type=text]").on('keyup', function () {
        if (+ $(this).val()) {
            alert('f');
            $(this).prev().prop('checked', true);
        } else {
            $(this).prev().prop('checked', false);
        }
    });
});

演示：http://jsfiddle.net/tamilcselvan/m242bo5z/2/

Answer 2

两个问题：

• 您无需单击即可更改复选框
• 在您的函数中，您使用 $this) 来指代复选框，但它指的是文本输入

试试这样的：

$("input[type=checkbox]").change(function (e) {
   update(e.target);
});

function update(el) {
   $("input[type=text]").each(function () {
    if (($(el).is(":checked"))) {
        $(this).val(1);
    }
    else
    {
        $(this).val(0);
    }
  });
}