Question

我想用Jquery

实现以下功能

有多次旅行，每次旅行都有复选框和文本框。
每当选中复选框，则必须将与该复选框对应的文本框中的值更新为＆＃34; 1＆＃34;

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

<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>时，它也无效。

Answer 1

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

Answer 2

next()只能获得下一个兄弟元素。在您的情况下，复选框后面的下一个兄弟元素是标记。在您想要的输入之前有两组标签，这就是为什么它在3＆＃39; next（）之后适合您的原因。当然，使用3个nexts并不是很漂亮，如果你在那里添加了另一个元素，它会轻易破坏。

使用

 nextAll('.ckval:first')

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

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

2 个答案: