JQuery操作HTML表单元素：获取与设置值

该文档主要介绍了如何使用JQuery来获取和操作HTML中的input控件，包括text、area、radio、checkbox以及select等元素的值，同时也涵盖了选中状态的设置和选项的添加。 在JQuery中，获取不同类型的input控件的值可以使用`.attr()`方法： 1. 获取text或textarea的值： ```javascript var value = $("#txt").attr("value"); ``` 这将获取ID为`txt`的文本框或文本区域的当前值。 2. 获取radio的值： ```javascript var radioValue = $("input[@type=radio][@checked]").val(); ``` 这将获取当前选中的radio按钮的值。如果有多组radio，可以通过name属性来指定组，例如`$('input[@name=items][@checked]').val();` 3. 获取checkbox的值： ```javascript var checkboxValue = $("#checkbox_id").attr("value"); ``` 这将获取ID为`checkbox_id`的checkbox的值。若要检查是否被选中，可以使用`$("#checkbox_id").is(":checked")`。 4. 获取select的值： ```javascript var selectValue = $('#sel').val(); ``` 这将获取ID为`sel`的select下拉框的当前选中项的值。若要设置选中项，可以使用`$("#sel").attr("value", 'new_value')`。 5. 改变选中状态： - radio选中： ```javascript $("input[@type=radio]").attr("checked", "2"); ``` - checkbox选中： ```javascript $("#chk1").attr("checked", true); // 或取消选中 $("#chk1").attr("checked", false); ``` 6. 设置或改变下拉框select的选中项： ```javascript $("#sel").attr("value", "-sel3"); ``` 7. 添加新的option到select： ```javascript $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel"); ``` 这些JQuery代码段可以帮助开发者轻松地处理HTML表单元素，实现获取和修改用户输入的数据，以及动态更新界面。在实际应用中，可以根据具体需求进行适当的调整和扩展。