jquery 对radio、checkbox、select常用的操作

最新推荐文章于 2023-04-23 14:44:16 发布

思而行at空空

最新推荐文章于 2023-04-23 14:44:16 发布

阅读量268

点赞数

分类专栏：前端文章标签： jquery radio checkbox select

本文链接：https://blog.csdn.net/weixin_40050532/article/details/80364579

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端开发中经常使用到单选框(radio)与多选框(checkbox)组件，需要对组件的状态进行设置和读取，操作如下

一单选按钮

<input type="radio" name="sex" value="1"> 男</label>
<input type="radio" name="sex" value="0"> 女</label>

1.jquery 获取下单选按钮的选中值

var sexVal = $('input:radio[name="sex"]:checked').val();

2.单选按钮的选中

<script type="text/javascript">
if(sex == "男"){
	$("input:radio[value='1']").attr('checked','true');
} else {
	$("input:radio[value='0']").attr('checked','true');
}
</script>

二复选框选

jquery实现复选框的全选与全不选

<table class="layui-table" >
	<thead>
		<tr>
			<th style="text-align:center;"><input type="checkbox" checked οnclick="selectOther(this);">选择</th>
		</tr>
	</thead>
	<tbody id="pageList">
	<c:if test="${!empty data.retList}">
	<c:forEach var="item" items="${data.retList}" varStatus="status">
		<tr><td style="text-align:center;"><input type="checkbox" checked name="rec_recode"  value="${item.uuid }"></td>
	</c:forEach>
    </c:if>
	</tbody>
</table>
<script type="text/javascript">
function selectOther(el){
	$("input:checkbox[name=rec_recode]").prop("checked", $(el).prop("checked")); 
}
</script>

三下拉选

<html>
<select id="category" name="category" οnchange="selectType()">
    <option value="">请选择类别</option>
    <option value="1" id="apple">类别1</option>
    <option value="2">类别2</option>
    <option value="3">类别3</option>
    <option value="4">类别4</option>
</select>
</html>

1.实现下拉选的选中事件

//选中“类别3”

<script type="text/javascript">
    $('#category option[value=3]').attr('selected',true);
</script>

2.下拉选的触发事件

<script>
function selectType(){
	var licType = $('select option:selected').val();
	if(licType){
		//后续操作.....
	}
}

</script>

3.下拉选的取值

<script type="text/javascript">
//获取选中的文本 “类别1”
var apple=$('#apple option:selected').text();

//获取选中的value值
var apple=$('#apple option:selected').val();
</script>

思而行at空空

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 对radio、checkbox、select常用的操作

前端开发中经常使用到单选框(radio)与多选框(checkbox)组件，需要对组件的状态进行设置和读取，操作如下一单选按钮&lt;input type="radio" name="sex" value="1"&gt; 男&lt;/label&gt;&lt;input type="radio" name="sex" value="0"&g
复制链接

扫一扫

专栏目录