在项目中难免会遇到一些表单的提交，尤其是多选框中，当用户选择了某一项时，禁止其他项的选择。所以为了避免这样的冲突，所以我们前端就得控制一下了，下面就来个简单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 checkbox多选框组选中提交，当选择某（无）一项，其他项禁止选中的更多相关文章

  1. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  2. jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例

    2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...

  3. 方便实用的jQuery checkbox复选框全选功能

    // 主复选框 <input type="checkbox" id="ck" name="ckAll">// 子复选框项 < ...

  4. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  5. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  6. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  7. freemarker中修改和添加功能中包含checkbox复选框默认选中需求的解决方式

    今天做的公司ERP系统上线第一天内部使用的,各种BUG铺天盖地,[虽然只是技术总监一个人在测试……],其中有一个就是其中部门管理页面中的修改和添加功能 一个人做一套ERP总是有点疏漏的,虽然里面的东西 ...

  8. Web版需求征集系统所得1，servlet中获取checkbox复选框的值

    servlet中获取checkbox复选框的值 </tr> <tr> <td align="right">研究类型</td> < ...

  9. Jquery模拟多选框(checkbox)

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

随机推荐

  1. python UI自动化之处理多窗口

    前言 有些页面的链接打开后,会重新打开一个窗口,想要在新页面上操作,就需要先切换窗口了.获取窗口的唯一标识用句柄表示,所以只需要切换句柄,我们就能在多个页面上灵活自如的操作了. 1.元素有属性,浏览器 ...

  2. Linux - Shell - 字符串截取

    概述 简述 字符串 截取 背景 之前因为要给文件 批量重命名, 做过字符串截取 当时做好了, 也说了要写点东西 结果忘了 现在又要尝试批量 重命名 才发现之前的东西已经忘了好多 要是当时把博客写下来, ...

  3. MySQL数据库重点监控指标

    MySQL数据库重点监控指标 QPS queries per seconds 每秒中查询数量 show global status like 'Question%'; Queries/seconds ...

  4. springboot中集成memcached

    前言 Memcached 是一个高性能的分布式内存对象缓存系统,其存储性能在某些方面不比redis差,甚至在文本类型数据的存储上性能略优于redis,本文将介绍如何在springboot中集成memc ...

  5. mysql之路4

    MYSQL之约束 2.主键约束 349行cnname换成cname

  6. asmx 、Web Service、Web API

    asmx .Web Service.Web API asmx 是WEB服务文件 asmx.cs里有相关代码 属于B/S形式,用SOAP方式HTTP访问,用XML返回 可以返回基础类型和PUBLIC结构 ...

  7. Java爬虫学习（1）之爬取新浪微博博文

    本次学习采用了webmagic框架,完成的是一个简单的小demo package com.mieba.spiader; import us.codecraft.webmagic.Page; impor ...

  8. 云原生学习笔记（3）——Kubernetes基本概念

    学习地址:https://developer.aliyun.com/lesson_1651_13078?spm=5176.270689.1397405.6.716ef5f8Q9z1z3#_13078 ...

  9. C语言编译和链接详解（通俗易懂，深入本质）

    我们平时所说的程序,是指双击后就可以直接运行的程序,这样的程序被称为可执行程序(Executable Program).在 Windows 下,可执行程序的后缀有.exe和.com(其中.exe比较常 ...

  10. PAT-链表-A1032 Sharing

    题意:给出两条链表的首地址以及若干个节点的的地址.数据.下一个节点的地址,求两条链表的首个共用节点的地址.如果两条链表没有共用节点,则输出-1. 思路:使用静态链表,首先遍历一遍第一个链表并进行标记. ...