update text box based on checkbox selection jquery

Question

I want to achieve following thing with Jquery

• There are multiple trips and each trip has checkbox and textbox.
• Whenever checkbox is checked then the value in textbox corresponding to that checkbox must be updated to "1" .

• Whenever customer types in textbox then checkbox shall be checked

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

But this is not working and when i use JSF Tag <h:selectBooleanBox> then also it is not working.

Answer 1

next() only get the next sibling element. In your case, the next sibling element after the checkbox are the tags. There are two sets of tags before your desired input, which is why it works for you after 3 'next()'s. Of course that is not very pretty to use 3 nexts and would break easily if you ever added another element in there.

use

 nextAll('.ckval:first')

and it will find the next ckval input rather than the next element.

Answer 2

You need to use nextAll and prevAll (along with the firstpseudo selector) as you have anchors in between your checkbox and textbox.

I would also change the click event to 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