JavaScript/JQuery radioButton(单选按钮)练习20190409 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="scripts/jquery-3.3.1.js"></script>
    </head>
    <body>
        
        <div id="checkBoxDiv1">
            测试单选框
            <input type="radio" name="checkBox1" class="checkBox1"><input type="radio" name="checkBox1" class="checkBox1" checked="checked">
        </div>
        
        <script type="text/javascript">
            
            $(".checkBox1").on("click", function(){
                var i = 0;
                var parentEle = $(this).parent();
                var index = $(this).index();
                $(".checkBox1").each(function(){
                    var currentEle = parentEle.children(".checkBox1:eq(" + i + ")");
                    if(i == index){
                        currentEle.attr("checked", true);
                    }else{
                        currentEle.attr("checked", false);
                    }
                    i++;
                });
                i = 0;
                $(".checkBox1").each(function(){
                    var currentEle = parentEle.children(".checkBox1:eq(" + i + ")");
                    alert(currentEle.attr("checked"));
                    i++;
                });
            });
            
        </script>
        
    </body>
</html>

这个是用来满足特殊需求的勾选一个单选按钮checked设置为true,其他的同name的单选框checked都设置为false.

posted @ 2019-04-09 10:06  ラピスラズリ(Dawn)  阅读(258)  评论(0)  编辑  收藏  举报