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 checkbox多选框组选中提交，当选择某（无）一项，其他项禁止选中的更多相关文章
- Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...
- jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...
- 方便实用的jQuery checkbox复选框全选功能
// 主复选框 <input type="checkbox" id="ck" name="ckAll">// 子复选框项 < ...
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- jQuery判断复选框checkbox的选中状态
通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...
- jquery判断复选框checkbox是否被选中
jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');
- freemarker中修改和添加功能中包含checkbox复选框默认选中需求的解决方式
今天做的公司ERP系统上线第一天内部使用的,各种BUG铺天盖地,[虽然只是技术总监一个人在测试……],其中有一个就是其中部门管理页面中的修改和添加功能 一个人做一套ERP总是有点疏漏的,虽然里面的东西 ...
- Web版需求征集系统所得1，servlet中获取checkbox复选框的值
servlet中获取checkbox复选框的值 </tr> <tr> <td align="right">研究类型</td> < ...
- Jquery模拟多选框(checkbox)
代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
随机推荐
- hashlib加密模块_python
一.hashlib模块 1.功能 主要用于字符串加密 2.常用方法 md5()/sha1():创建一个md5或者sha1加密模式的hash对象update(arg):用字符串参数来更新hash对象,如 ...
- 1054 The Dominant Color
大致题意就是给出N行M列的元素,找出出现次数最多的元素并输出. #include<iostream> #include<unordered_map> using namespa ...
- 题解【洛谷P3958】[NOIP2017]奶酪
题面 题解 我们考虑使用一个并查集维护空洞之间的关系. 如果两个空洞能相互到达,那么它们的祖先也是相同的. 枚举从哪一个空洞开始,能否到达奶酪的上表面. 如果能到达就输出Yes,否则输出No. 注意开 ...
- GitBook相关使用以及配置笔记
本地安装 GitBook的安装非常简单.您的系统只需满足这两个要求: NodeJS(推荐使用v4.0.0及以上版本) Windows,Linux,Unix或Mac OS X gitbook-cli 是 ...
- DE1-GHRD
新建工程socs_system 进入菜单选择Tools---Qsys 配置hps系统 首先选择 在更改参数 配置hps的sdram各项参数 将名字改为hps_0 这样hps配置完成:在配置存储器和其他 ...
- VMare安装及虚拟机的安装
VMware安装 1.下载安装包安装 2.安装虚拟机 , \(b\) and \(c\). He keeps these numb ...
- 515，前端性能优化--减少http请求（待补充）
对于影响页面呈选的因素有三个地方:服务器连接数据库并计算返回数据,http请求以及数据(文件)经过网络传输,文件在浏览器中计算渲染呈选:其中大约80%的时间都消耗在了http的请求上,所以要想大幅度的 ...
- AAC huffman decoding
在AAC编码器内部,使用huffman coding用于进一步减少scalefactor和量化频谱系数的冗余. 从individual_channel_stream层提取码流进行huffman解码,码 ...
- 按需引入element-ui时修改.babelrc报错
刚开始学习element-ui时用的都是完整引入,图省事,这次准备按需引入,以减小项目体积, 乙烯类npm 之后,到了修改 .babelrc 文件这一步(PS:vue-cli 2.0版本会有这个文件, ...