原生及jQuery操作表单元素
2017-01-10 本文已影响32人
从此以后dapeng
操作radio
// html 部分
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
// jQuery获取选中的值
var checkedGender = $("input[name='gender']:checked").val();
// jQuery根据值进行勾选
$("input[name='gender'][value='female']").prop("checked", true);
// jQuery判断对应值是否选中
$("input[name='gender'][value='female']").prop("checked");
操作checkbox
// html 部分
<input type="checkbox" name="color" value="blue" checked>蓝色
<input type="checkbox" name="color" value="green">绿色
<input type="checkbox" name="color" value="red">红色
// jQuery获取选中的值
$("input[name='color']:checked")each(function(){
$(this).val()
})
// jQuery根据值进行勾选
$("input[name='color'][value='red']").prop("checked", true);
// jQuery判断对应值是否选中
$("input[name='color'][value='red']").prop("checked");
操作select
// html 部分
<select name="fruit">
<option value="">-请选择-</option>
<option value="apple">苹果</option>
<option value="pear">梨子</option>
<option value="peach">桃子</option>
</select>
// jQuery获取选中的【值 | 文本 | 序号】
var code = $("select[name=fruit]").val();
var text = $("select[name=fruit]>option:selected").text();
var index = $("select[name=fruit]>option:selected").index();
// jQuery根据【值 | 文本 | 序号】进行勾选
$("select[name=fruit]").val('pear');
$("select[name=fruit]>option:contains('桃子')").prop("selected",true)
$("select[name=fruit]>option:eq(1)").prop("selected",true)
// jQuery判断对应【值 | 文本 | 序号】是否选中
$("select[name=fruit]>option[value='apple']").prop("selected")
$("select[name=fruit]>option:contains('苹果')").prop("selected")
$("select[name=fruit]>option:eq(1)").prop("selected")