原生及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")
上一篇下一篇

猜你喜欢

热点阅读