您的位置：首页 > Web前端 > JQuery

jquery 操作 checkbox

2009-10-23 10:00 417 查看
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航