Inputs类

pandyle使用Inputs类来管理用户的输入。

  • 创建:使用$(…).inputs()来创建Inputs类的实例,该实例获取指定元素下面所有表单元素的输入数据(表单元素不需要包含在<form>元素内)。也可使用new Pandyle.Inputs(element)来创建实例。

  • Inputs拥有以下两个方法:

  • data():将表单元素的数据映射为对象并返回。

  • set(data): 设置指定字段的值并更新对应的表单元素。

  1. <div>
  2. <p>
  3. 姓名: <input type="text" name="name">
  4. </p>
  5. <p>
  6. 性别:
  7. <label>
  8. <input type="radio" name="sex" value="1">
  9. </label>
  10. <label>
  11. <input type="radio" name="sex" value="2">
  12. </label>
  13. </p>
  14. <p>
  15. 职位:
  16. <select name="marriage">
  17. <option value="0">请选择</option>
  18. <option value="1">码农</option>
  19. <option value="2">设计</option>
  20. <option value="3">PM</option>
  21. </select>
  22. </p>
  23. <button onclick="output()">输出</button>
  24. <button onclick="reset()">重置</button>
  25. </div>
  26. <script>
  27. var inputs = $('div').inputs();
  28. function output(){
  29. console.log(inputs.data());
  30. }
  31. function reset(){
  32. inputs.set({
  33. name: '',
  34. sex: '',
  35. job: 0
  36. })
  37. }
  38. </script>