根据复选框选择 jQuery 更新文本框

update text box based on checkbox selection jquery

本文关键字：更新 文本 jQuery 选择 复选框      更新时间：2023-09-26

我想用Jquery实现以下目标

  • 有多个行程，每个行程都有复选框和文本框。
  • 每当选中复选框时，文本框中与该复选框对应的值必须更新为"1"。

  • 每当客户输入文本框时，应选中复选框

    <input type="checkbox" id="ckval1" class="checkvaloare" />Trip 1 <a 
href="">sad</a><a href="">ssad</a>
<input type="text" id="text1" class="ckval" size="2" />
<br/>
<input type="checkbox" id="ckval2" class="checkvaloare" />Trip 2 <a  
href="">sad</a><a href="">sassad</a>
<input type="text" id="text2" class="ckval" size="2" />

JQUERY as

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

但是这不起作用，当我使用 JSF 标签<h:selectBooleanBox>时，它也不起作用。

您需要

使用 nextAll 和 prevAll（以及first伪选择器），因为复选框和文本框之间有锚点。

我还会将click事件更改为change 

$(function () {
    $("input[type=checkbox]").on('change', function () {
        $(this).nextAll('.ckval:first').val($(this).is(':checked') ? '1' : '0');
    });
    $("input[type=text]").on('keyup', function () {
        if ($(this).val()) {
            $(this).prevAll('.checkvaloare:first').prop('checked', true);
        } else {
            $(this).prevAll('.checkvaloare:first').prop('checked', false);
        }
    });
});

例

next()只获取下一个同级元素。 在您的情况下，复选框后面的下一个同级元素是标签。在您想要的输入之前有两组标签，这就是为什么它在 3 个 'next（）' 之后适合您。当然，使用 3 个下一个不是很漂亮，如果您在其中添加另一个元素，很容易中断。

用 

 nextAll('.ckval:first')

它将找到下一个 ckval 输入，而不是下一个元素。

相关文章：