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

根据复选框Jquery更新文本框

2 个答案: