在项目中难免会遇到一些表单的提交，尤其是多选框中，当用户选择了某一项时，禁止其他项的选择。所以为了避免这样的冲突，所以我们前端就得控制一下了，下面就来个简单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. 洛谷P2158 [SDOI2008]仪仗队 欧拉函数的应用

    https://www.luogu.org/problem/P2158 #include<bits/stdc++.h> #define int long long using namesp ...

  2. Hibernate的基本工作原理

    Hibernate开发过程中会用到5个核心接口: 1.Configuration2.SessionFactory3.Session4.Transaction5.QueryHibernate就是通过这些 ...

  3. 月薪20k的web前端开发程序员，他们都会的这6招

    web前端工程师是近几年的新兴职业,也是目前火爆而且高薪的职业.不同的公司也有不同的叫法,比如:网页界面开发,网站设计等,要学好web前端开发,需要掌握什么方法与技巧? 一.div和table 这个是 ...

  4. 字节流和字符流的read方法

    字节流和字符流的read方法 public class Test { public void fileOutput() throws Exception { File file = new File( ...

  5. Java多线程wait和notify协作，按序打印abc

    有一个经典的多线程面试题:启三个线程,按序打印ABC 上代码: package cn.javaBase.study_thread1; class MyRunnable1 implements Runn ...

  6. [Netcat] 断线重连 自动重连

    今天想做些操作,所以想到了nc 但是nc太过于轻量级 所以 导致我没有找到他的断线重连功能 然后我就想到了windows的神器之一 vbs脚本 vbs代码如下 Dim a,b set a= WScri ...

  7. b 解题报告

    本题已收录至2019/9/15 本周总结 题目 [问题描述] Hja有一棵\(n\)个点的树,树上每个点有点权,每条边有颜色.一条路径的权值是这条路径上所有点的点权和,一条合法的路径需要满足该路径上任 ...

  8. 并发之ATOMIC原子操作--Unsafe解析（三）

    Atomic 类的原子操作是依赖java中的魔法类sun.misc.Unsafe来实现的,而这个类为我们提供了访问底层的机制,这种机制仅供java核心类库使用,而不应该被普通用户使用. 获取Unsaf ...

  9. MySQL学习（七） 索引选择（半原创）

    概述 该篇文章主要阐述一个例子(例子来自参考资料,侵删),然后总结今天相关的知识点. 例子 (例子来自参考文章,非原创) 创建表并插入数据,并执行查询 CREATE TABLE `t` ( `id` ...

  10. 十大常见web漏洞及防范

    十大常见web漏洞 一.SQL注入漏洞 SQL注入攻击(SQL Injection),简称注入攻击.SQL注入,被广泛用于非法获取网站控制权,是发生在应用程序的数据库层上的安全漏洞.在设计程序,忽略了 ...