jquery获取和设置表单数据
1.需求
正好做到设置和获取表单数据的功能,做个整理
2.计划安排
3.计划实施
1.获取值
<!--1获取普通文本框的值--> <input type="text" id="a1"/> <!--btn--> <button id="submit">按钮</button> <script src="jquery-1.8.3.min.js"></script> <script> $('#submit').click(function () { console.log($('#a1').val()); }) </script>
<!--2.获取checkbox是否打勾--> <input type="checkbox" id="a1"/> <!--btn--> <button id="submit">按钮</button> <script src="jquery-1.8.3.min.js"></script> <script> $('#submit').click(function () { //打勾返回true,没有打勾返回false console.log($('#a1').is(":checked")); }) </script>
<!--3.获取radio选中的value值--> <input type="radio" name="age" value="1"/> <input type="radio" name="age" value="2"/> <input type="radio" name="age" value="3"/> <!--btn--> <button id="submit">按钮</button> <script src="jquery-1.8.3.min.js"></script> <script> $('#submit').click(function () { console.log($('input[name="age"]:checked').val()); }) </script>
<!--4.获取选中的下拉框的值--> <select name="" id="select"> <option value="1">111</option> <option value="2">222</option> <option value="3">333</option> <option value="4">444</option> </select> <!--btn--> <button id="submit">按钮</button> <script src="jquery-1.8.3.min.js"></script> <script> $('#submit').click(function () { console.log($('#select').val());
$("#childmodel").find("option:selected").text();
}) </script>
2.设置值
<!--1设置普通文本框的值--> <input type="text" id="a1"/> <!--btn--> <button id="submit">按钮</button> <script src="jquery-1.8.3.min.js"></script> <script> $('#a1').val(1111) </script>
<!--2.设置checkbox打勾--> <input type="checkbox" id="a1"/> <!--btn--> <button id="submit">按钮</button> <script src="jquery-1.8.3.min.js"></script> <script> $('#a1').attr('checked','checked'); </script>
<!--3.设置radio选中--> <input type="radio" name="age" value="1"/> <input type="radio" name="age" id="a2" value="2"/> <input type="radio" name="age" value="3"/> <!--btn--> <button id="submit">按钮</button> <script src="jquery-1.8.3.min.js"></script> <script> $('#a2').attr('checked','checked'); </script>
<!--4.设置选中的下拉框的值--> <select name="" id="select"> <option value="1">111</option> <option value="2">222</option> <option value="3">333</option> <option value="4">444</option> </select> <!--btn--> <button id="submit">按钮</button> <script src="jquery-1.8.3.min.js"></script> <script> //设置value=4的值为选中 $('#select').val('4');
//文本
var prov = document.getElementById(id);
for (var i = 0, len = prov.options.length; i < len; i++)
if (prov.options[i].text==text)
prov.selectedIndex = i;
</script>
4.总结
一些小东西总是容易忘,记录下来方便查找