将 HTML 复选框值放入文本字段

put html checkbox value into text field

本文关键字：文本 字段 HTML 复选框      更新时间：2023-09-26

我有一个值为 U 的复选框

我想在选中复选框时将此值放入文本输入中。

如何使用 JavaScript 或 jQuery 来做到这一点？我还需要能够在多个复选框和输入文本字段上执行此操作

HTML 

<input type="checkbox" value="U" id="checkBox"/>
<input type="text" value="" id="textInput" />

简讯

$("#checkBox").change(function(){
    $("#textInput").val($(this).val());
});

演示

试试这个，

.HTML 

<label><input type="checkbox" value="U" />Check</label>
<input type="text" />

脚本

$('input[type="checkbox"]').on('click',function(){
   var is_checked=$(this).prop('checked');
   var val='';
   if(is_checked)
     val=this.value;
   $('input[type="text"]').val(val);
});

工作演示

最简单的

方法：o）

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            window.onload = function() {
                var checkboxInput = document.getElementById('checkboxInput'),
                    textInput = document.getElementById('textInput');
                checkboxInput.addEventListener('click', UpdateTextInput, false);
            };
            function UpdateTextInput () {
                if(checkboxInput.checked) {
                    textInput.value = checkboxInput.value;
                }
                else {
                    textInput.value = '';
                }
            }
        </script>
    </head>
    <body>
        <input type="checkbox" id="checkboxInput" value="U"/>
        <input type="text" id="textInput" />
    </body>
</html>

假设一个文本框与每个复选框相关联，如下所示。

HTML模式 ： 

<input type="checkbox" value="test1" id="test1" checked><label>Test</label>
<input type="text" class="text1"id="textbox1" name="textbox1" value="">

j查询：

$('input[type="checkbox"]').change(function() {
    var vals = $(this).val();
    if($(this).is(':checked')){
        $(this).next().next("input[type='text']").val(vals);
    }else{
        $(this).next().next("input[type='text']").val("");
    }
});

这是工作演示： http://jsfiddle.net/uH4us/

相关文章：