美文网首页
原生及jQuery操作表单元素

原生及jQuery操作表单元素

作者: 从此以后dapeng | 来源:发表于2017-01-10 23:56 被阅读32次

操作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")

相关文章

  • 原生及jQuery操作表单元素

    操作radio 操作checkbox 操作select

  • 15、获取和设置表单内容

    val():获取和设置表单内容 原生js是通过value属性来获取或者设置表单元素值 jQuery是通过 var(...

  • JavaScript之jQuery

    九、jQuery 目录:初识jQuery及公式、jQuery选择器、jQuery事件、jQuery操作DOM元素 ...

  • No.36 jQuery内容文本值

    主要针对元素的内容还有表单的值操作。 一、普通元素内容 html() (相当于原生inner HTML) ht...

  • 2020-04-07jQuery

    基本选择器 层叠选择器 属性选择器 位置选择器 表单选择器 操作 操作元素的CSS样式 设置元素内容 jQuery...

  • jquery设计思想书目录

    jQuery-选择网页元素 jQuery-改变结果集 jQuery-链式操作 jQuery-元素的操作:取值和赋值...

  • 前端基础入门六(JQuery进阶)

    jQuery特殊属性操作 val方法 val方法用于设置和获取表单元素的值,例如input、textarea的值 ...

  • 00-jQuery初识

    什么是jQuery jQuery是一个JavaScript库 jQuery可以简化原生JS的操作 对比原生JS,写...

  • jQuery

    jQuery - 简书 jQuery 库包含以下特性:HTML 元素选取,HTML 元素操作,CSS 操作,HTM...

  • 1.2jquery总结

    1.jquery总结 jquery链式操作jquery函数内的this指原生对象

网友评论

      本文标题:原生及jQuery操作表单元素

      本文链接:https://www.haomeiwen.com/subject/vhulbttx.html