根据复选框更新文本框 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

两期：

您无需单击即可更改复选框
在你的函数中，你使用 $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);
    }
  });
}

Answer 2

使用 .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/

根据复选框更新文本框 Jquery

Update textboxes based on checkboxes Jquery

javascript

checkbox

jquery