原生及jQuery操作表单元素

操作radio

// html 部分
女
// 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 部分
蓝色
绿色
红色
//  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 部分

//  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")

你可能感兴趣的:(原生及jQuery操作表单元素)