当复选框被选中时，在文本框中显示数据 [英] display data in a textbox when checkbox is checked

问题描述

我有三个文本框有id text1，text2，text3和一个复选框具有id检查。我在第一个文本框中显示的东西，我们说10.现在如果我将复选框，然后自动20将显示在第二个文本框。第三个文本框保持不变。 如果，我将在第一和第二个文本框中显示内容，现在如果我将选中复选框，那么在第三个文本框中将显示相同的20。检查后，如果在任何时候，我将取消选中复选框，然后值20也将从文本框中删除（第二或第三）任何想法吗？请容易与我

I have three text boxes having id text1, text2, text3 and one checkbox having id check. I am displaying something in first textbox let's say 10. Now if i will check checkbox then automatically "20" will be displayed in the second textbox. Third textbox remains same as it is. If I will display something in 1st and 2nd textboxes, now if i will check checkbox then same "20" will be displayed in 3rd textbox. After checked if in anytime i will uncheck the checkbox then value "20" will also be removed from the textbox(either 2nd or 3rd) Any idea please? Please be easy with me

index.jsp

index.jsp

<input type="checkbox" id="check"/>

<input type="text" id="text1" value="10"/>
<input type="text" id="text2"/>
<input type="text" id="text3"/>

推荐答案

您的问题不容易理解。

Your question is not easy to understand....

当选中复选框时，下一个空输入文本必须显示20值？
如果未选中复选框，则最后输入的20将被清除。

When checkbox is checked the next empty input text have to display '20' value ? And if checkbox is unchecked last input with '20' is cleared value ?

向每个输入文本添加checker类。

Add the "checker" class to each input text.

<input type="checkbox" id="check"/>
<input type="text" id="text1" value="10" class="checker"/>
<input type="text" id="text2" class="checker"/>
<input type="text" id="text3" class="checker"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<br/>
<input type="text" id="anotherTB" value="100"/>

使用此 jquery 脚本而不是您的

$(document).ready(function(){
    $('#check').click(function(){

        if($(this).is(':checked'))
        {
            var stop='';
            $('.checker').each(function(){
                if($(this).val()=='' && !stop)
                {
                   $(this).val('20');
                    stop='stop'; 
                   // Add something like that to set other textbox values
                   var add = parseInt($('#anotherTB').val()) + parseInt($(this).val());
                   $('#anotherTB').val(add); 
                }
            });
        }

        else if(!$(this).is(':checked'))
        {
            $('.checker').each(function(){
                if($(this).val()=='20')
                {
                   $(this).val('');
                }
            });
        }
    });
});

您可以看到它在这里工作： http://jsfiddle.net/w9hAZ/1/

You can see it work here : http://jsfiddle.net/w9hAZ/1/

这篇关于当复选框被选中时，在文本框中显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！