javascript - checkbox选中当前状态，获取选中元素兄弟节点文本-PHP中文网问答

需求：点击确定按钮，获取指定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>
   <p 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>
   </p>
    <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>

全部回复(4)

PHP中文网2017-04-10 17:42:58 4楼

说几个大问题
第一个问题：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')

赞 +0

添加回复

天蓬老师2017-04-10 17:42:58 3楼

我没有看懂你写的，但是我给你提供一个想法，你现在不是能点击获得checked的了吗？你把这个dom节点放在一个变量里，这样你获取值的时候就可以获取了

PHP中文网2017-04-10 17:42:58 2楼

var cur = $(this).find('input[name=quan]').prop('checked'); 这里有问题,find找到所有input而你只判断了第一个，那你不是选第一个的时候就false的
另外你是想把选中的文字打印出来的话，
var quanText = $("input[name=quan]:checked").next('span').text();这句已经可以,前面的判断没意义

伊谢尔伦2017-04-10 17:42:58 1楼

根据你的描述，大概是这个意思，

var cur = $(this).find('input[name=quan]').prop('checked');

这一句，前面 $(this).find('input[name=quan]') 你获得的是4个checkbox对象，然后这里后面直接跟prop('checked')，只会第一个checkbox进行判断，而不是你想的选中四个里面checked的那个