jQuery操作下拉框、单选框与复选框的常用方法

下拉框操作

下拉框操作

//获取下拉菜单选中项的文本（注意选择器中间有空格） var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //获取下拉菜单选中项的值 var cc2 = $('.formc select[@name="country"]').val(); //获取下拉菜单选中项的ID属性值 var cc3 = $('.formc select[@name="country"]').attr("id"); //清空下拉框内容 $("#select").empty();$("#select").html(''); //动态添加下拉框的option选项 $("<option value='1'>1111</option>").appendTo("#select")

相关说明如下

select[@name='country'] option[@selected]

该选择器表示查找具有name属性且值为'country'的select元素内部，拥有selected属性的option元素。可以看出，以@开头的部分表示后续跟随的是属性名。

单选框操作

单选框操作

//获取单选框的选中项的值（注意选择器中间没有空格） $("input[@type=radio][@checked]").val(); //将value等于2的单选框设置为选中状态（注意选择器中间没有空格） $("input[@type=radio][@value=2]").attr("checked",'checked');

复选框操作

复选框操作

//获取复选框中第一个选中项的值 $("input[@type=checkbox][@checked]").val(); //由于复选框通常允许多选，因此可以遍历输出所有选中项 $("input[@type=checkbox][@checked]").each(function(){ alert($(this).val()); }); //取消勾选 $("#chk1").attr("checked",''); //执行勾选操作 $("#chk2").attr("checked",true); //判断复选框是否已被勾选 if($("#chk1").attr('checked')==undefined){}