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

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

 即时改变

你可能感兴趣的:(JavaScript,html,jquery)