基于复选框选择jquery更新文本框 [英] update text box based on checkbox selection jquery

问题描述

我想使用Jquery实现以下操作

I want to achieve following thing with Jquery

• 有多个行程，每个行程都有复选框和文本框。


• 每当选中复选框，则该复选框对应的文本框中的值必须更新为1。

• 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为

$(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> 那么它也不工作。

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

推荐答案

您需要使用 nextAll 和 prevAll （以及第一个伪选择器），因为您在您的复选框和文本框之间有锚点。

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

我也将点击事件更改为更改

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

示例

这篇关于基于复选框选择jquery更新文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！