jquery操作checkbox、radio 和 ul

最新推荐文章于 2020-04-14 16:52:52 发布

勇敢的小提莫

最新推荐文章于 2020-04-14 16:52:52 发布

阅读量233

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_35086941/article/details/105511113

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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