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

Question

我想用 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 作为

$(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> 时它也不起作用。

Answer 1

next() 只获取下一个兄弟元素。在您的情况下，复选框后的下一个同级元素是标签。在你想要的输入之前有两组标签，这就是为什么它在 3 'next()' 之后对你有用。当然，使用 3 个 nexts 并不是很好，如果你在其中添加另一个元素，它很容易崩溃。

使用

 nextAll('.ckval:first')

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

Answer 2

您需要使用 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);
        }
    });
});

Example

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

update text box based on checkbox selection jquery

html

javascript

checkbox

jquery

jsf-2.2