其他分享
首页 > 其他分享> > JQuery checkbox多选框组选中提交,当选择无一项,其他项禁止选中

JQuery checkbox多选框组选中提交,当选择无一项,其他项禁止选中

作者:互联网

在项目中难免会遇到一些表单的提交,尤其是多选框中,当用户选择了某一项时,禁止其他项的选择。所以为了避免这样的冲突,所以我们前端就得控制一下了,下面就来个简单demo,记录一下,有需要的伙伴可以拿去耍耍~~

 

1、先放一张极丑的demo效果图:

 

2、html代码:

<body>
        <div class="mybox">
            <p>1、请选择你喜欢吃的甜品:</p>
            <input type="checkbox" class="mycheckbox" name="mycheck" value="雪糕"/>雪糕            
            <input type="checkbox" class="mycheckbox" name="mycheck" value="蛋糕"/>蛋糕            
            <input type="checkbox" class="mycheckbox" name="mycheck" value="无"/>无            
        </div>
        <div class="mybox">
            <p>1、请选择你喜欢的运动:</p>
            <input type="checkbox" class="mycheckbox" name="mycheck" value="滑雪"/>滑雪            
            <input type="checkbox" class="mycheckbox" name="mycheck" value="爬山"/>爬山            
            <input type="checkbox" class="mycheckbox" name="mycheck" value="无"/>无            
        </div>
        <div class="mybox">
            <p>1、请选择你喜欢吃的美食:</p>
            <input type="checkbox" class="mycheckbox" name="mycheck" value="烧烤"/>烧烤            
            <input type="checkbox" class="mycheckbox" name="mycheck" value="海鲜"/>海鲜        
            <input type="checkbox" class="mycheckbox" name="mycheck" value="无"/>无            
        </div>
        
        <div><button id="commit">提交</button></div>
    </body>

 

3、script 代码:

<script type="text/javascript">      

        for(var i = 0 ; i < $(".mybox").length; i++){                        
            for(var j = 0 ; j < $(".mybox")[i].childNodes.length; j++){                
                $(".mybox")[i].childNodes[j].onclick = function(){                    
                    if($(this)[0].nextSibling.nodeType == 3 && $.trim($(this)[0].nextSibling.textContent) == "无"){                        
                        if(this.checked){
                            $(this).siblings().prop("disabled",true)
                            $(this).siblings().prop("checked",false)
                        }
                        else{
                            $(this).siblings().prop("disabled",false)
                        }
                    }
                }                
            }            
        }
        
        $("#commit").click(function(){
            $("input[name='mycheck']:checked").each(function(){
                $("body").append(this.value+"、")
            })
        })
        
    </script>

 

标签:JQuery,function,checkbox,checked,mybox,prop,选择,选中,siblings
来源: https://www.cnblogs.com/zyfenblog/p/11200044.html