添加子'选择孩子时的年龄

Add child's age when child selected

本文关键字：孩子 选择 添加      更新时间：2023-09-26

编程非常新。建立一个表格，询问基本问题，如年龄、已婚与否、有多少孩子。当用户从箭头键中选择1、2或3个孩子时，我想显示用户可以输入孩子年龄和姓名的字段。这必须在提交按钮之前完成。一个例子是hotels.com主页，其中的房间预订选项显示您是否有孩子，并在选择时询问您选择的所有孩子的年龄。Javascript会更好，但无论如何都愿意这么做。请帮忙。

您需要在children文本框上设置更改事件（但最好同时针对keyup和更改事件），并根据在这些字段上输入的child数量进行循环。在循环中，创建元素并最终将元素附加到结果中，参见下面的示例：

假设这是HTML

<div>
  Child : 
  <input type="number" min="0" max="5" id="kids" name="kids"/>
</div>
<!-- display output inside this element -->
<div id="output"></div>

这是您的JS

$('#kids').on('change keyup', function () {      
  // get value of child(number)
  var val = $(this).val();
  // checking if entered more than 5 or any number(its depend)
  if ( val > 5 ) {
    alert('opps no more than 5');
    return;
  }
  // every time child number's updated
  // clear the container
  $('#output').empty();
  var output;
  for (var i = 0, length = val; i < length; i++) {
    output = 'Name :<input type="text" name="name"/><br/>Age : <input type="text" name="age"/><hr/>';
    // append the element
    $('#output').append(output);
  }
});

这只是一个例子，希望你明白

DEMO

相关文章：