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

我想用Jquery实现以下function

• 有多次旅行，每次旅行都有复选框和文本框。
• 每当选中复选框，则对应于该复选框的文本框中的值必须更新为“1”。

• 客户在文本框中键入时，应选中复选框

  Trip 1 sadssad  
   Trip 2 sadsassad  

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 Tag 它也无法正常工作。

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

例

Answer 2

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

使用

  nextAll('.ckval:first') 

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