javascript - checkbox选中当前状态，获取选中元素兄弟节点文本
本文介绍了javascript - checkbox选中当前状态，获取选中元素兄弟节点文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
需求：点击确定按钮，获取指定ul.class中的选中状态兄弟节点文本
问题是，只有第一行的checkbox生效啊？？？
贴代码，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
*{
margin:0;
padding:0;
}
ul,ol{
list-style: none;
}
li{
padding:20px;
border:1px solid #f00;
height: 50px;
}
li input{
display: none;
}
li input + span{
display: none;
padding:2px;
background-color: #ff3600;
}
li label{
position: absolute;
display: block;
width:100%;
height:50px;
}
li input:checked + span{
display: block;
}
button{
padding:20px;
}
</style>
</head>
<body>
<div class="quan-cont">
<ul class="fanxian">
<li>
<label >
<input type="checkbox" name="quan">
<span>aa1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="quan">
<span>aa2</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="quan">
<span>aa3</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="quan">
<span>aa45</span>
</label>
</li>
</ul>
<ul class="jiaxi">
<li>
<label >
<input type="checkbox" name="quan" >
<span>aa11</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="quan">
<span>aa33</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="quan">
<span>aa22</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="quan">
<span>aa55</span>
</label>
</li>
</ul>
<button id="btn">
确定
</button>
</div>
<script>
$(function () {
$('ul').on('click','li',function () {
if($(this).find('input:checkbox').prop('checked')){
$(this).siblings().find('input:checkbox').prop('checked',false);
}
});
$('#btn').on('click', function () {
var ul = $('ul');
ul.each(function () {
if(ul.prop('class','fanxian')){
var cur = $(this).find('input[name=quan]').prop('checked');
if(cur){//如果有选中
var quanText = $("input[name=quan]:checked").next('span').text();
console.log(quanText);//只有第1行生效? 当点击第其他个Li的时候text值取不到..
}
return false;
}
if(ul.prop('class','jiaxi')){
//....
}
});
})
});
</script>
</body>
</html>解决方案
说几个大问题
第一个问题：if(ul.prop('class','fanxian')){}；这个判断的只是给你选中的每个ul的class改为"fanxian";按照你的意思应该为if(ul.hasClass("fanxian")){}。
第二个问题：var cur = $(this).find('input[name=quan]').prop('checked');
这个在ul中找到input[name=quan]的集合，对于后面的属性prop('checked')，只选择第一个进行获取，
所以$(this).find('input[name=quan]').prop('checked')在第一个input选中的时候,为true,选择其他的同类input时候为false;按照你的意思应该为
var cur = $(this).find('input[name=quan]:checked')
这篇关于javascript - checkbox选中当前状态，获取选中元素兄弟节点文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
