前端拾零01—checkbox&radio&select总结

前端拾零01—checkbox&radio&select总结

Write By CS逍遥剑仙

我的主页: www.csxiaoyao.com

GitHub: github.com/csxiaoyaojianxian

Email: sunjianfeng@csxiaoyao.com

前端拾零收录日常开发中一些很常见很基础的前端操作,省去每次google甚至答案错误的烦恼

github演示地址,看这个在线演示可以省略以下说明

1. checkbox

设置选中

// js设置check1选中
document.getElementById('check1').checked = true
// jq设置check2不选中
$("#check2").prop("checked", false)

判断选中状态

// js判断id=check1状态
document.getElementById("check1").checked
// jq判断id=check2状态
$("#check2").prop('checked')

获取选中元素

var selector = "input[type=checkbox][name='cs-checkbox']:checked"
// js
document.querySelectorAll(selector)
// jq
$(selector)

2. radio

设置选中

// js设置value=1选中
document.querySelector("input[type='radio'][name='cs-radio'][value='1']").checked = true
// jq prop设置value=2不选中
$("input[type=radio][name='cs-radio'][value=2]").prop("checked", false)
// jq attr设置value=3选中
$("input[type=radio][name='cs-radio'][value=3]").attr("checked",true)

判断选中状态

// js判断value=1状态
document.querySelector("input[type='radio'][name='cs-radio'][value='1']").checked
// jq判断value=2状态
$("input[type=radio][name=cs-radio][value=2]").prop('checked')

获取选中元素

var selector = "input[type='radio'][name='cs-radio']:checked"
// js
document.querySelector(selector)
// jq
$(selector)

3. select

设置选中

// js选择value="csxiaoyao"
document.querySelector("select.select option[value='csxiaoyao']").selected = true
// jq选择value="sunshine"
$("select.select option[value='sunshine']").attr("selected", true)

判断选中状态

// js判断第2个元素是否选中
document.querySelector("select.select").options[1].selected
// js判断csxiaoyao是否选中
document.querySelector("select.select option[value='csxiaoyao']").selected
// jq判断sunshine是否选中
$("select.select option[value='sunshine']").prop("selected")

获取选中元素和索引

// js
var dom = document.querySelector("select.select")
var index1 = dom.selectedIndex
result = dom.options[index1]
// jq
$("select.select").val()
$("select.select").find('option:selected')
$("select.select option:selected")
$("select.select option:last")
www.csxiaoyao.com

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏禅林阆苑

前端拾零01—checkbox&radio&select总结 【原创】

前端拾零收录日常开发中一些很常见很基础的前端操作,省去每次google甚至答案错误的烦恼

1093
来自专栏Spring相关

Vue中webpack的Style的lang和Scoped属性

修改goods.vue中的style我们会发现到goods的时候回影响到其他的div样式,添加scoped作用域可以解决这个问题,如下:

1582
来自专栏无所事事者爱嘲笑

react-native flatlist 上拉加载onEndReached方法频繁触发的问题

7792
来自专栏python3

tkinter -- Canvas(2)

Canvas 使用了 stack 的技术,新创建的 item 总是位于前一个创建的 item 之上,故调用above 时,它会查找 rt2上面的 item 为 ...

1033
来自专栏知道一点点

bootstrap快速入门笔记(一)

853
来自专栏smy

解决ios不支持按钮:active伪类的方法

 mozilla开发社区上有 :active 不起作用的答案: [1] By default, Safari Mobile does not use the :...

3287
来自专栏happyJared

IDEA快捷键拆解系列(十五):经验篇

  本文整理了一些博主本人在学习工作中比较常用到的快捷键,有需要的可以参考一下,也欢迎留言补充。

1181
来自专栏coding for love

CSS常用布局实现04-三列布局

三列布局应该是非常经典的一个布局,考虑下面这个问题,实现左中右三列,其中左右两列宽度已知为200px,中间宽度自适应。该如何实现?

2552
来自专栏web前端

05移动端事件

一、移动端三大事件          1、手指按下     ontouchstart      2、手指触摸     ontouchmove          ...

2035
来自专栏九彩拼盘的叨叨叨

学习前端 第1周第2天

842

扫码关注云+社区