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 ...
随机推荐
- 采用PHP实现”服务器推”技术的聊天室
传统的B/S结构的应用程序,都是采用”客户端拉”结束来实现客户端和服务器端的数据交换. 本文将通过结合Ticks(可以参看我的另外一篇文章:关于PHP你可能不知道的-PHP的事件驱动化设计),来实 ...
- HTTP协议常用状态码
HTTP协议常用状态码 <?php send_http_status(404); /** * HTTP Protocol defined status codes * HTTP协 ...
- error C2825: '_Iter': 当后面跟“::”时必须为类或命名空间 -- 原因可能是参数错误或者自定义函数名和库函数名冲突
今天运行程序的时候遇到了下面这个bug > B1020.cpp >e:\vs2013\vs2013_rtm_ult_chs\data\vc\include\xutility(): erro ...
- 题解【洛谷P1379】八数码难题
题面 典型的\(\text{BFS}\). 双向广搜是一种对\(\text{BFS}\)的优化,它适用于起点和终点都明确的题目. 这里给出我的双向广搜模板. inline int bfs()//双向广 ...
- ORA-00917: missing comma
问题描述 ORA-00917: missing comma 问题原因 逗号,引号什么的多了或者少了,或者换行引起的
- 【转载】Hadoop生态上几个技术的关系与区别:hive、pig、hbase 关系与区别
转自:http://www.linuxidc.com/Linux/2014-03/98978.htm Pig 一种操作hadoop的轻量级脚本语言,最初又雅虎公司推出,不过现在正在走下坡路了.当初雅虎 ...
- httpclient发送请求的几种方式
package asi; import org.apache.http.HttpEntity; import org.apache.http.client.config.RequestConfig; ...
- 洛谷 1219:八皇后 (位运算 & DFS)
题目链接: https://www.luogu.org/problem/show?pid=1219#sub row:受上面的皇后通过列控制的位置 ld:受上面的皇后通过从右至左的斜对角线控制的位置 r ...
- powerdesigner16.5改变数据模型字体大小
1. 点击 2. 选择 3. 选择完点击确定后: 4. 点击设为默认:再点ok
- eclipse报错:unable to install breakpoint in .......due to missing line number attributes
报错信息如下: 解决方案方案1.把断点都干掉,再启动.应该是代码更新后,断点位置没有代码了或位置改变了. 方案2.在Eclipse - Preferences - Java - Complier 下 ...