广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >各种选择框jQuery的选中方法是什么
  • 904
分享到

各种选择框jQuery的选中方法是什么

2024-04-02 19:04:59 904人浏览 独家记忆
摘要

这篇文章主要介绍各种选择框Jquery的选中方法是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!select下拉列表的选中方法是:$("slect option:eq(

这篇文章主要介绍各种选择框Jquery的选中方法是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

select下拉列表的选中方法是:$("slect option:eq(1)").attr("selected",true);//选中第二个option

chekbox的选中方法:$("[value=check1"]:checkbox).attr("checked",true);

radio的选中方法:$("[value=radio2"]:radio).attr("checked",true);

以上是简写,重要的是看代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-10-4</title>
<style type="text/CSS">
.test{
 font-weight:bold;
 color : red;
}
.add{
 font-style:italic;
}
</style>
 <!--  引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 $(function(){
   //设置单选下拉框选中
   $("input:eq(0)").click(function(){
      $("#single option").removeAttr("selected"); //移除属性selected
      $("#single option:eq(1)").attr("selected",true); //设置属性selected
   });
   //设置多选下拉框选中
   $("input:eq(1)").click(function(){
      $("#multiple option").removeAttr("selected"); //移除属性selected
      $("#multiple option:eq(2)").attr("selected",true);//设置属性selected
      $("#multiple option:eq(3)").attr("selected",true);//设置属性selected
   });
   //设置单选框和多选框选中
   $("input:eq(2)").click(function(){
      $(":checkbox").removeAttr("checked"); //移除属性checked
      $(":radio").removeAttr("checked"); //移除属性checked
      $("[value=check2]:checkbox").attr("checked",true);//设置属性checked
      $("[value=check3]:checkbox").attr("checked",true);//设置属性checked
      $("[value=radio2]:radio").attr("checked",true);//设置属性checked
   });
 });
 //]]>
 </script>
</head>
<body>
  <input type="button" value="设置单选下拉框选中"/>
  <input type="button" value="设置多选下拉框选中"/>
  <input type="button" value="设置单选框和多选框选中"/>

<br/><br/>

<select id="single">
 <option>选择1号</option>
 <option>选择2号</option>
 <option>选择3号</option>
</select>

<select id="multiple" multiple="multiple" >
 <option selected="selected">选择1号</option>
 <option>选择2号</option>
 <option>选择3号</option>
 <option>选择4号</option>
 <option selected="selected">选择5号</option>
</select>

<br/><br/>


<input type="checkbox" value="check1"/> 多选1
<input type="checkbox" value="check2"/> 多选2
<input type="checkbox" value="check3"/> 多选3
<input type="checkbox" value="check4"/> 多选4

<br/>

<input type="radio" value="radio1" name="a"/> 单选1
<input type="radio" value="radio2" name="a"/> 单选2
<input type="radio" value="radio3" name="a"/> 单选3
</body>
</html>

以上是“各种选择框jQuery的选中方法是什么”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: 各种选择框jQuery的选中方法是什么

本文链接: https://www.lsjlt.com/news/78105.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 各种选择框jQuery的选中方法是什么
    这篇文章主要介绍各种选择框jQuery的选中方法是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!select下拉列表的选中方法是:$("slect option:eq(...
    99+
    2022-10-19
  • jquery怎么设置单选框为选中(两种方法)
    在前端开发中,单选框是一个非常常见的表单控件。在某些情况下,我们可能需要在页面加载的时候就将某个单选框设置为选中状态,而不是等待用户手动去操作。这时,我们可以使用jQuery来实现这一需求。下面分别介绍两种常用且简单的方法。方法1:使用.p...
    99+
    2023-05-14
  • jquery中属性选择器是什么
    本教程操作环境:windows7系统、jquery3.6版本、Dell G3电脑。jquery 属性选择器介绍jQuery属性选择器是基于元素属性作为筛选条件的选择器。属性选择器,指的是通过“元素的属性”来选择元素的一种方式。属性选择器可以...
    99+
    2023-05-14
    javascript jquery
  • 揭秘CSS基本选择器:深入解析各种选择器的使用方法
    CSS(Cascading Style Sheets)是一种用于描述网页样式的语言。在CSS中,选择器是用来选择需要应用样式的元素的一种方式。选择器的使用方法有很多种,每一种都有其特点和适用场景。本文将深入解析各种CSS基本选择器的用法,帮...
    99+
    2023-12-26
    CSS选择器 深入解析 基本选择器
  • jquery选择器的原理是什么
    这篇文章主要讲解了“jquery选择器的原理是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery选择器的原理是什么”吧!详解jquery选择器的...
    99+
    2022-10-19
  • jquery类选择器返回的是什么
    本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。在jquery中,类(class)选择器用于选取带有指定class的所有元素。jquery 类(class)选择器class 引用 HTML 元素的 cl...
    99+
    2022-11-22
    javascript jquery 选择器
  • 选择最适合您的HTML中的CSS框架的方法是什么?
    随着互联网的快速发展,网站的设计和开发变得越来越重要。而在网站页面的开发中,CSS框架扮演着至关重要的角色。CSS框架可以帮助开发者更快速、高效地创建和管理网页布局和样式,同时还可以提供一致性和响应式设计,以满足不同设备和浏览器的需求。然而...
    99+
    2023-12-27
    选择:选择 适合:适合 框架:框架
  • jquery中eq选择器和eq()方法怎么用
    这篇文章主要介绍了jquery中eq选择器和eq()方法怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。:eq(index)匹配一个给定...
    99+
    2022-10-19
  • 欧洲vps选择的方法是什么
    选择欧洲VPS的方法可以包括以下几个方面:1. 选择地理位置:欧洲地域广大,不同国家和城市的VPS提供商可能性能和价格存在差异,可以...
    99+
    2023-08-11
    欧洲vps vps
  • CSS中选择器的选择原则是什么
    这篇文章给大家分享的是有关CSS中选择器的选择原则是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择...
    99+
    2022-10-19
  • 云服务器的选择方法是什么
    云服务器(Cloud Drive)是一种提供在云端托管应用程序的服务,它可以使应用程序更加高效、安全和经济地运行。以下是一些选择云服务器的一般方法: 性能:云服务器提供了更好的资源利用率,因此您可以在相同的时间内处理更多的应用程序。如果...
    99+
    2023-10-26
    服务器 方法
  • css中的:not()选择器和jQuery中的.not()方法怎么用
    这篇文章主要介绍“css中的:not()选择器和jQuery中的.not()方法怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css中的:not()选择器和j...
    99+
    2022-10-19
  • css选择器和三种引入方式是什么
    本篇内容主要讲解“css选择器和三种引入方式是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css选择器和三种引入方式是什么”吧! css基础 一.什么...
    99+
    2022-10-19
  • 云主机带宽选择的方法是什么
    选择云主机带宽的方法通常包括以下几个方面:1. 流量预估:根据预计的网站或应用的访问量,以及每个访问者的平均流量消耗,来估计所需的带...
    99+
    2023-09-13
    云主机
  • 云服务器的选择方法是什么呢
    选择云服务器时,需要考虑多种因素,包括云服务器的配置、可用性、安全性、价格、可靠性等。下面是一些常见的云服务器选择方法和注意事项: 配置:选择云服务器之前,需要考虑云服务器的配置。不同的云服务器厂商提供的配置可能会有所不同,因此需要仔细...
    99+
    2023-10-28
    什么呢 服务器 方法
  • 选择高防服务器的方法是什么
    选择高防服务器的方法有:1、根据自己的成本、日常攻击情况及服务器的型号配置来选择对应的高仿服务器;2、选择稳定性高的服务器,保证网站的正常运行;3、选择有正规的IDC服务商,保证服务器有完善的售后技术支持服务。具体内容如下:选择正确的辩护服...
    99+
    2022-10-07
  • jQuery中hover方法搭配css的hover选择器怎么实现选中元素突出显示方法
    这篇文章主要介绍jQuery中hover方法搭配css的hover选择器怎么实现选中元素突出显示方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!今天做帮一个师姐做网页遇到一个这样的...
    99+
    2022-10-19
  • css中的3种基本选择器分别是什么
    小编给大家分享一下css中的3种基本选择器分别是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css的基本选择器有3种,分别为:1、标签选择器,又称为类型选择...
    99+
    2023-06-06
  • 云服务器的选择方法是什么意思
    首先,选择一个适合自己的云服务器需要考虑多个因素,如服务提供商的可靠性、价格、可用性、性能和安全性等。用户可以选择一家可靠的云服务提供商,或者选择一个价格较为合理的云服务器,或者根据自己的需求选择不同的云服务器类型。 其次,云服务器的选择...
    99+
    2023-10-28
    服务器 方法
  • 云服务器配置选择的方法是什么
    选择云服务器配置的方法可以根据以下几点来进行考虑:1. 预算:首先要确定您的预算范围,云服务器的配置和价格是成正比的,高配置的服务器...
    99+
    2023-08-08
    云服务器
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作