JQuery下拉框与复选框

最新推荐文章于 2025-06-19 09:27:46 发布

原创最新推荐文章于 2025-06-19 09:27:46 发布 · 1.1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #input #button #问卷调查 #class

JQuery|ZTree|JBox 专栏收录该内容

19 篇文章

订阅专栏

本文介绍使用jQuery操作HTML下拉框与复选框的方法，包括获取与设置下拉框选项、动态添加选项、全选与反选复选框等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看下一个例子：

首先是一个下拉框

<table width="50%">
<tr>
    <td >选择资源类型：</td>
<td id="changeContent">HTML页面</td>
<td>
  <select id="s1">
   <option value="1">HTML页面</option>
   <option value="2">下载资源</option>
   <option value="3">超链接资源</option>
   <option value="4">自测题</option>
   <option value="5">课件资源</option>
   <option value="6">问卷调查</option>
   <option value="7">FAQ</option>
   <option value="8">文本及附件</option>
  </select>
</td>
</tr>
</table>

之后，通过

$(document).ready(function(){

$("#s1").change(function(){
   $("#changeContent").html( $("option[value="+$(this).val()+"]").html() );
      alert($("option[value="+$(this).val()+"]").html());
      //alert($(this).val());
  });

});

以下代码进行下拉框值的获取。

上文中的 $(this).val() 对应下拉框中的 value

而 $("option[value="+$(this).val()+"]").html() 则是对应value后的内容。

   $("select[id=select]").change(function(){
    var newvar = $("select[id=select] option:selected").text();
    $("input[id=input1]").val(newvar);
   });

    $("#showdiv").click(function(){
              alert( "Email:"+ $("#user_name").val()+"@"+$("#input1").val() );
    })

这段代码表示id为selected的下拉框改变后，会自动取得所选中的值内容，并提示出来。

可以通过append方法，动态的增加下拉框中的选项.

eg:

$(document).ready(function(){
          var i=1;
    $("#editlink").click(function(){
            $("#selectlink").append( "<option value=/"1/">cssrain"+i+"</option>" );
   i++;
    });

});

</script>
<input type="button" id="editlink" value="add options" />
<div id="editlinkdiv">
    <select id="selectlink" name="selectlink">
        <option>add options</option>
    </select>
</div>

其中，append方法直接把需要添加的内容添加至下拉框的option选项中。

4.复选框的全选择与反选择等。。。

<mce:script type="text/javascript" src="JS/jquery.js" mce_src="JS/jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> <body> <input type="button" value="test" id="test"> <input type="checkbox" id="a" checked="checked" value="1"/>1 <input type="checkbox" id="b" checked="checked" value="2"/>2 <input type="checkbox" id="c" value="3" onclick="alert(this.value)"/>3 <input type="button" value="测试没有选中的" class="notcheck"> <hr> <form id="form1"> <input type="radio" name="items" id="item1" value="a"/>A <br/> <input type="radio" name="items" id="item2" value="b"/>B <br/> <input type="submit" id="btn1"> </form> <hr> <input type="button" value="测试选中的" class="btn"> <div class="inpblk" id="divPosType"> <ul> <li><input type="checkbox" name="chkJobType" id="chkJobType1" value="1" checked/>全职</li> <li><input type="checkbox" name="chkJobType" id="chkJobType2" value="2" />兼职</li> <li><input type="checkbox" name="chkJobType" id="chkJobType3" value="3" checked />临时</li> <li><input type="checkbox" name="chkJobType" id="chkJobType4" value="4" checked />实习</li> </ul> </div> <input type="button" id="selectall" name="selectall" value="全部选择" /> <input type="checkbox" id="checkall" value="1"/>全选 </body>