6miu盘搜

jquey学习(3)----jquery的checkbox 与select简单应用

xiaoxiao2022-06-11 18

<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>

<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>

即时改变

转载请注明原文地址: https://www.6miu.com/read-4932008.html

最新回复(0)