Rumah > Artikel > hujung hadapan web > 选择框jQuery的选中方法详解

选择框jQuery的选中方法详解

零下一度asal: 2017-06-27 09:55:361313semak imbas

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?1.1.11" 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" style="height:120px;">
  <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>

Atas ialah kandungan terperinci 选择框jQuery的选中方法详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：总结jquery判断复选框是否被选中实例Artikel seterusnya：vue项目构建与实战实例教程

Artikel berkaitan

Lihat lagi