jquery操作checkbox、radio 和 ul

1.html

<!-- checkbox -->
	 <input class="cb" id="id1" type="checkbox" value="1"/>1
	 <input class="cb" id="id2" type="checkbox" value="2"/>2
	 <input class="cb" id="id3" type="checkbox" value="3"/>3
	 <input class="cb" id="id4" type="checkbox" value="4"/>4
	 <input class="cb" id="id5" type="checkbox" value="5"/>5
	<br/>
	<input type="button" value="迭代獲取checkbox" id="btnCB"></input>
	
	<!-- ul -->
	<ul id="liList">
		<li class="l1">1</li>
		<li class="l2">2</li>
		<li class="l3">3</li>
		<li class="l4">4</li>
		<li class="l5">5</li>
    </ul>
	
	<!-- radio -->
	<input type="radio" class="ra" id="id1" name="num" value="1" checked />1
	<input type="radio" class="ra" id="id2" name="num" value="2" />2
	<input type="radio" class="ra" id="id3" name="num" value="3" />3
	<br/>
	<input type="button" value="獲取選中的radio" id="btnR"></input>

2.jquery

<!--  checkbox  -->
$("#btnCB").click(function(){
    $(".cb").each(function(){
		if($(this).is(':checked')){
			//獲取勾選的
			alert($(this).val()+"=="+$(this).attr("id"));
		 }
		//alert($(this).val());//獲取所有
	})
  });
  
  <!--  ul   -->
	$("#liList li").click(function(){
		//alert($(this).text()+"=="+$(this).attr("class"));//獲取點擊的值
		$("#liList li").each(function(){
			//$(this).attr("class","1");
			alert($(this).text()+"=="+$(this).attr("class"));//循環所有li
		});
		//$(this).attr("class","active");
	})
	
	 <!--  radio  -->
	$("#btnR").click(function(){
		$(".ra").each(function(){
			if($(this).is(':checked')){
			   alert($(this).val()+"--"+$(this).attr("id"));//獲取當前選中的radio
			}
			//alert($(this).val());//循環獲取所有radio
		})
	})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章