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 ...
随机推荐
- TC基础与自动化
前言 互联网产品的测试常常要覆盖在不同网络下的表现,例如丢包,带宽受限,时延及抖动等网络较差的情况,为了测试场景的网络情况可定义及复现,就需要有个工具对弱网进行模拟.业界一些通用的弱网模拟工具,如NE ...
- 装饰器_python
一.装饰器中提及的知识点 装饰器主要作用:在原函数基础上添加新功能 1.作用域:LEGB 2.高阶函数 3.闭包(在一个内部函数中,对在外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就认 ...
- hashmap与currentHashMap
hashmap的缺点 多线程不安全,在并发场景下使用时容易出现死循环,脏读问题等 死循环:https://juejin.im/post/5a66a08d5188253dc3321da0 (这篇好点)h ...
- 【Python】文本进度条
1.0代码: import time#引入time库 scale=10#文本进度条宽度 print("------执行开始------") for i in range(scale ...
- POJ 3264 Balanced Lineup(ST模板)
链接:http://poj.org/problem?id=3264 题意:给n个数,求一段区间L,R的最大值 - 最小值,Q次询问 思路:ST表模板,预处理区间最值,O(1)复杂度询问 AC代码: # ...
- 算法导论2-4 O(nlgn)时间复杂度求逆序对
def mergesort(nums,le,ri): if le>ri-2: return 0 mi=le+(ri-le)//2 a=mergesort(nums,le,mi) b=merges ...
- ET框架之自写模块SmartTimerModule
1.代码结构图 2.SmartTimer 模块Entity: using System; namespace ETModel { [ObjectSystem] public class SmartTi ...
- js -- 高阶函数的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Spring MVC 中使用properties文件
首先要搭建Spring mvc的环境,然后开始properties文件里的配置: 第一步:在springcontext中注入properties,具体路径自己调整 <bean id=" ...
- Git的基本使用 -- 远程仓库
SSH公钥 生成公钥 ssh-keygen -t rsa -C "xxx@xxx.com" 然后按三次回车 添加公钥 cat ~/.ssh/id_rsa.pub查看公钥 将生成的公 ...