jquery 操作 checkbox

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<script src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//使用:checked選取器，來操作多選框.
$("input[type=checkbox]").click(countChecked);
function countChecked() {
var s = "";
$("input[type=checkbox]:checked").each(function(){
s += $(this).val();
});
var n = $("input[type=checkbox]:checked").length;
$("div").eq(0).html("<strong>有"+n+" 個被選中!</strong>"+"值："+s);
}
countChecked();//進入頁面就調用.
//使用:selected選取器，來操作下拉式清單.
$("select").change(function () {
var str = "";
$("select :selected").each(function () {
str += $(this).text() + ",";
});
$("div").eq(1).html("<strong>你選中的是："+str+"</strong>");
}).trigger('change');
// trigger('change') 在這裡的意思是：
// select載入後，馬上執行onchange.
// 也可以用.change()代替.
});
</script>

<script src="jquery-1.3.2.min.js"></script>  <script type="text/javascript">  $(document).ready(function(){            //使用:checked選取器，來操作多選框.$("input[type=checkbox]").click(countChecked);function countChecked() {var s = "";$("input[type=checkbox]:checked").each(function(){s += $(this).val();});  var n = $("input[type=checkbox]:checked").length;  $("div").eq(0).html("<strong>有"+n+" 個被選中!</strong>"+"值："+s);}countChecked();//進入頁面就調用. //使用:selected選取器，來操作下拉式清單.$("select").change(function () {  var str = "";  $("select :selected").each(function () {str += $(this).text() + ",";  });  $("div").eq(1).html("<strong>你選中的是："+str+"</strong>");        }).trigger('change');// trigger('change') 在這裡的意思是：// select載入後，馬上執行onchange.// 也可以用.change()代替.  });  </script>

Java代碼

<body>
<form id="form1" action="#">
多選框：<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<div></div>
<br/><br/>
下拉式清單1：<br/>
<select name="test" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br/><br/>
下拉式清單2：<br/>
<select name="test2" >
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br/><br/>
<div></div>
</body>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jquery 操作 checkbox

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support