根据html中的复选框选择填充文本框

populating text box based on checkbox selections in html

本文关键字：填充 文本 选择 复选框 html 根据      更新时间：2023-09-26

我正在尝试设置一个html文件，其中我有以下复选框:

()我有一个账单地址:我有一个账号:

网站将有一个大的文本框。在这个文本框中，如果我检查账单地址，我应该有文本"账单地址:"出现在文本框中。如果我还检查了账号"账号:"应该出现在文本框中"账单地址"的下面一行。

我写的代码是基于这个网站上的另一个堆栈溢出查询:

复选框填充表单字段

我如何使用这段代码来获得我上面解释的期望结果?

附件是我目前为止的代码:

<html lang="en"  >
<head>
    <script src="jStorage/json2.min.js"></script>
    <script src="jStorage/jquery-1.12.2.min.js"></script>
    <script src="jStorage/jstorage.min.js"></script>

<body>
I have a billing address: <input type="checkbox" id="checkbox1" value='Billing Address: ' />
<br>
 I have an account number: <input type="checkbox" id="checkbox2" value='account number:' />
<br>
<font size=2><table border=0 cellspacing=0 cellpadding=0 width=100%><tr>
<td width='40%' valign='center' align='right'>Enter Remarks in free format: </td>
<td align='center' width=5%></td>
<td align='left'>&nbsp;
<td align='left'><textarea id='remarks' rows='10' cols='50'</textarea>     
</td>
</tr>
<script>
$(document).ready(function(){
$("#checkbox1").change(function() {
if(this.checked) {
  //alert("checked ");
   //get the values of the filled fields
    $name = $("#checkbox1").val();
    $phone = $("#checkbox2").val();
    $total = $name+$phone;
    //console.log("name");
    // then add those values to your billing infor window feilds 
    $("#remarks").val($total);
    //$("#remarks").val($phone);
    // then form will be automatically filled .. 
  }
  else{
   $('#remarks').val('');
   //$("#phone_billing").val('');
  }
 });
});
</script>
</body>
</html>

你想要这样的东西吗?它将显示(在文本框中)被选中的任何复选框的值。

    <html lang="en"  >

    <body>
    I have a billing address: <input type="checkbox" id="checkbox1" value='Billing Address: ' />
    <br>
     I have an account number: <input type="checkbox" id="checkbox2" value='account number:' />
    <br>
    <font size=2><table border=0 cellspacing=0 cellpadding=0 width=100%><tr>
    <td width='40%' valign='center' align='right'>Enter Remarks in free format: </td>
    <td align='center' width=5%></td>
    <td align='left'>&nbsp;
    <td align='left'>
            <textarea id='remarks' rows='10' cols='50'></textarea>     
    </td>
    </tr>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

    <script>
    $(document).ready(function(){
            $("[type=checkbox]").change(function() {
                var msg = "";
                $('input:checked').each(function(i,v){
                    msg += $(v).val() + "'n";
                });

                $("#remarks").val(msg);   
             });
    });
    </script>
    </body>
    </html>
相关文章：