select选择器和checkbox复选框区分

最新推荐文章于 2024-10-09 11:19:11 发布

退无可退而立版

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量82

点赞数

分类专栏： JS 文章标签： javascript select combobox checkbox

本文链接：https://blog.csdn.net/beiback/article/details/129893306

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

文章介绍了如何使用JavaScript和jQuery来操作HTML中的select和checkbox元素，包括设置选中项、获取选中项的value和text，以及它们的共性和区别。select元素支持单选或多选，而checkbox通常用于单选。

摘要由CSDN通过智能技术生成

1、 select

<select name="xxxSelectKey">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
1、设置value为optionXX的项选中
     $(".xxxSelectKey").val("pxx");
2、设置text为pxx的项选中
    $(".xxxSelectKey").find("option[text='optionXX']").attr("selected",true);
3、获取当前选中项的value
    $(".xxxSelectKey").val();
4、获取当前选中项的text
    $(".xxxSelectKey").find("option:selected").text();

2、 checkbox

		<div style="margin-bottom:20px">
			<input  name="xxxChecKey" value="Apple" label="Apple:">
		</div>
		<div style="margin-bottom:20px">
			<input  name="xxxChecKey" value="Orange" label="Orange:">
		</div>
		<div style="margin-bottom:20px">
			<input  name="xxxChecKey" value="Banana" label="Banana:">
		</div>
1、设置value为optionXX的项选中
     $(".xxxChecKey").val("pxx");
2、设置text为pxx的项选中
    $(".xxxChecKey").find("option[text='optionXX']").attr("checked",true);
3、获取当前选中项的value
    $(".xxxChecKey").val();
4、获取当前选中项的text
    $(".xxxChecKey").find("option:checked").text();