欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> Html form checkbox多选复选框控件多选
具有代表性多项选择checkbox应用案例
多选复选框表单控件在网页中比较常见，故名可以选择多项答案。
一、html checkbox多选框语法与结构
&input name=&Fruit& type=&checkbox& value=&& /&
使用html input标签，name为自定义，type类型为&checkbox&的表单
扩展阅读：
二、form checkbox用法案例
我们就已开始时候的截图为案例
1、对应主要部分HTML代码：
&action=&&&method=&get&&您喜欢的水果？&&&&name=&Fruit&&type=&checkbox&&value=&&&苹果&&&name=&Fruit&&type=&checkbox&&value=&&&桃子&&&name=&Fruit&&type=&checkbox&&value=&&&香蕉&&&name=&Fruit&&type=&checkbox&&value=&&&梨&&&
2、html案例截图
html&Checkbox用法案例截图
当然以后DIVCSS5会为大家介绍通过扩展这个多选框控件样式，让其更漂亮。
3、Checkbox用法案例演示
演示：如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • •
必备HTML基础教程 Essential HTML Tutorials
&最新文章NEWS• • • • • • • • • • 相关文章RELATED• • • • • • • • • • CSS EFFECTS / CSS MODULE如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 12:03
原创：本文 DIVCSS5版权所有。
学习与资源分享平台JS多个复选框向一个文本框内传值的效果 - 素材家园
当前位置： >
> JS多个复选框向一个文本框内传值的效果
选择一个复选框，那么这个复选框的值就传到一个文本框中，如果这个文本框里有了就不用加了，没有则加。如果取消选择，则从文本框中取掉传的值。中间以,分隔，最后结尾没有,分隔符。而且这个是按照顺序排列到文本框里面的 直接点运行代码，查看效果演示&!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html&xmlns=&http://www.w3.org/1999/xhtml&&
&meta&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&/&
&title&多个复选框向一个文本框内传值的网页效果&-&素材家园&/title&
&style&type=&text/css&&
input{&margin-right:3px}
label{margin:0&5px}
&script&type=&text/javascript&&
window.onload&=&function(){
&var&obox&=&document.getElementById(&box&);
&var&cboList&=&obox.getElementsByTagName(&input&);
&var&oText&=&document.getElementById(&tt&);
&document.getElementById(&box&).onclick&=&function(e){
&&var&src&=&e?e.target:event.srcE
&&if(src.tagName&==&&INPUT&){
&&&var&values&=&[];
&&&for(var&i=0;i&cboList.i++){
&&&&if(cboList[i].checked){
&&&&&values.push(cboList[i].value);
&&&oText.value&=&values.join(&,&);
&p&&input&type=&text&&id=&tt&&/&&/p&
&div&id=&box&&
&&&&&label&&input&type=&checkbox&&value=&a&&/&a&/label&
&&&&&label&&input&type=&checkbox&&value=&b&&/&b&/label&
&&&&&label&&input&type=&checkbox&&value=&c&&/&c&/label&
&&&&&label&&input&type=&checkbox&&value=&d&&/&d&/label&
&&&&&label&&input&type=&checkbox&&value=&e&&/&e&/label&
&&&&&label&&input&type=&checkbox&&value=&f&&/&f&/label&
大家都在下载
这些是最新的
素材家园免费素材网51模板集专业软件定制、系统开发以及各种开源CMS教程,织梦教程、帝国cms教程、phpcms教程、.net教程、JS特效等
jquery让checkbox只能选择一个值
来源：51模板集
发布时间： 12:33
& & .&net 项目的时候如何让jquery让checkbox只能选择一个值。这里我们就来介绍详细的使用方法：
第一步：首先input的类型是checkbox ，id是chkSelect（这个ID是随便命名的）
&input id=&chkSelect& value='' runat=&server& type='checkbox' /&
第二步：在按钮的中的事件是&&CheckSelectedCount();
&asp:Button ID=&btnNotice& runat=&server& Text=&发送提醒短信& OnClientClick=&return CheckSelectedCount();&&/&
第三步：在&head&&/head&
加入下面的关键性代码就是验证只能选择一个数值。
&script type=&text/javascript&&
& & & & function CheckSelectedCount() {
& & & & & & var str = &&
& & & & & & $('input[type=checkbox]:checked').each(function() {
& & & & & & & & str += $(this).val();
& & & & & & });
& & & & & & if ($('input[type=checkbox]:checked').length & 1) {
& & & & & & & & alert(&只能选择一个患者&);
& & & & & & & &
& & & & & & }
& & & & & & if (str != &&) {
& & & & & & & & url = &BookClient/SysNotice/Consultation/DXSend.aspx?cid=& + str + &&rnd=& + Math.random();
& & & & & & & & top.ymPrompt.win({ title: '发送短信', iframe: { src: url }, height: 340, width: 500 });
& & & & & & & & //
& & & & & & & &
& & & & & & }
& & & & & & else {
& & & & & & & & alert(&请选择需要短信提醒的患者&);
& & & & & & & &
& & & & & & }
& & &/script&
其中红色区域的代码是只能判断选择一个值。
记得头部要引入jquery的类。51模板集介绍的很详细。
相关文章推荐
热门点击TOP榜
51模板集专业、、、以及各种,、、、、等
皖ICP备号-1Jquery实际应用，判断radio，selelct，checkbox是否选中及选中的值,jquery如果获取多个重复name的input的值
Jquery实际应用，判断radio，selelct，checkbox是否选中及选中的值,jquery如果获取多个重复name的input的值
[摘要：1:jquery若是猎取反复name的input的值 var ids = ; $( input[name='boxSend']:checked ).each( function () { ids = ids + $( this ).val() + , ; }); 那里记得末了把ids末了的一个 逗号, 给往失落 2:Jquery现实运用，判别rad]
1:jquery如果获取重复name的input的值
var ids = &&;
$(&input[name='boxSend']:checked&).each(function () {
ids = ids + $(this).val() + &,&;
这里记得最后把ids最后的一个逗号,给去掉
2:Jquery实际应用，判断radio，selelct，checkbox是否选中及选中的值
jquery取radio单选按钮的值
$(&input[name='items']:checked&).val();
另：判断radio是否选中并取得选中的值
如下所示：
function checkradio(){
var item = $(&:radio:checked&);
var len=item.
if(len&0){
alert(&yes--选中的值为：&+$(&:radio:checked&).val());
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关
获取一组radio被选中项的值
var item = $('input[name=items][checked]').val();
获取select被选中项的文本
var item = $(&select[name=items] option[selected]&).text();
//注意这里的option前面有个空格
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[name=items]').get(1).checked =
文本框，文本区域：$(&#txt&).attr(&value&)；
多选框checkbox：$(&#checkbox_id&).attr(&value&)；
单选组radio： $(&input[type=radio][checked]&).val();
下拉框select： $('#sel').val();
控制表单元素：
文本框，文本区域：$(&#txt&).attr(&value&,'');//清空内容
$(&#txt&).attr(&value&,'11');//填充内容
多选框checkbox： $(&#chk1&).attr(&checked&,'');//不打勾
$(&#chk2&).attr(&checked&,true);//打勾
if($(&#chk1&).attr('checked')==undefined) //判断是否已经打勾
单选组radio：
$(&input[name=test][value=34]&).attr(&checked&,true);//设置value=34的radio被选中$(&input[id=testid][value=34]&).attr(&checked&,true);//设置value=34的radio被选中
下拉框select： $(&#sel&).attr(&value&,'-sel3');//设置value=-sel3的项目为当前选中项
$(&&option value='1'&1111&/option&&option value='2'&2222&/option&&).appendTo(&#sel&)//添加下拉框的option
$(&#sel&).empty()；//清空下拉框
刚开始接触jquery，很多东西不熟悉,在用$(&#id&)来获得页面的input元素的时候，发现$(&#id&).value不能取到值
后来终于在伟大的百度帮助下，找到了问题的原因：
$(&&)是一个jquery对象，而不是一个dom element
value是dom element的属性
jquery与之对应的是val
val() :获得第一个匹配元素的当前值。
val(val):设置每一个匹配元素的值。
所以，代码应该这样写：
取值：val = $(&#id&)[0].
$(&#id&)[0].value = &new value&;
或者$(&#id&).val(&new value&);
或者这样也可以：val = $(&#id&).attr(&value&);
jQuery中each非常好用，常用它取代javascript的for循环
例如在一个function里有一个each,在each里某种条件 成立的话，就把这个function返回true或者false
function methodone(){
$.each(array,function(){
if(条件成立){
结果发现老是不对。
后来查找资料才发现,在each代码块内不能使用break和continue,要实现break和continue的功能的话，要使用其它的方式
break----用
continue --用
所以当我在each里想使用return true给这个function返回时，其实只是让each继续执行而以
连each都没有中断，所以function也就不能return了
另：判断radio是否选中并取得选中的值
如下所示：
function checkradio(){
var item = $(&:radio:checked&);
var len=item.
if(len&0){
alert(&yes--选中的值为：&+$(&:radio:checked&).val());
3:判断Jquery判断是否有checkbox被选中
&script type=&text/javascript&&
     function CheckType() {
         if ($(&input:checked&).length & 0) {
            
         } else {
             alert(&你没有选择一个&);
            
         }
      }
参考网址 /onlys/articles/jQuery.html
4:Jquery 判断 Checkbox 是否有被选中
var mySaveMuban = ($(&#chkMuBan&).attr('checked') == undefined) ? 0 : 1;
5：Jquery 动态生成select里面的option选项
for (var i = 0; i & 60; i++)
      $(&&option value='& + i + &'&& + i + &&/option&&).appendTo(&select[name='minute']&); //添加下拉框的option        $(&&option value='& + i + &'&& + i + &&/option&&).appendTo(&select[name='second']&); //添加下拉框的option
6: 全选，反选    两种实现方式
function checkstudents(classid) {
var checked = $(&#chk& + classid).attr(&checked&);
if (checked) {
$(&#class& + classid + & input[type='checkbox']&).attr(&checked&, true);
$(&#class& + classid + & input[type='checkbox']&).attr(&checked&, false);
var i = 1;
function CheckAllTeacher() {
if (i % 2 == 1) {
$(&#sendContent input[type='checkbox']&).attr(&checked&, true);
$(&#sendContent input[type='checkbox']&).attr(&checked&, false);
7:jquery获得select option的值 和对select option的操作
jQuery获取Select元素，并选择的Text和Value:
1. $(&#select_id&).change(function(){//code...});
//为Select添加事件，当选择其中一项时触发
2. var checkText=$(&#select_id&).find(&option:selected&).text();
//获取Select选择的Text
3. var checkValue=$(&#select_id&).val();
//获取Select选择的Value
4. var checkIndex=$(&#select_id &).get(0).selectedI
//获取Select选择的索引值
5. var maxIndex=$(&#select_id option:last&).attr(&index&);
//获取Select最大的索引值
jQuery获取Select元素，并设置的 Text和Value:
实例分析：
1. $(&#select_id &).get(0).selectedIndex=1;
//设置Select索引值为1的项选中
2. $(&#select_id &).val(4);
// 设置Select的Value值为4的项选中
3. $(&#select_id option[text='jQuery']&).attr(&selected&, true);
//设置Select的Text值为jQuery的项选中
jQuery添加/删除Select元素的Option项：
实例分析：
1. $(&#select_id&).append(&&option value='Value'&Text&/option&&);
//为Select追加一个Option(下拉项)
2. $(&#select_id&).prepend(&&option value='0'&请选择&/option&&);
//为Select插入一个Option(第一个位置)
3. $(&#select_id option:last&).remove();
//删除Select中索引值最大Option(最后一个)
4. $(&#select_id option[index='0']&).remove();
//删除Select中索引值为0的Option(第一个)
5. $(&#select_id option[value='3']&).remove();
//删除Select中Value='3'的Option
6. $(&#select_id option[text='4']&).remove();
//删除Select中Text='4'的Option
三级分类 &select name=&thirdLevel& id=&thirdLevel&
onchange=&getFourthLevel()&&
&option value=&0& id=&thirdOption&&
请选择三级分类
&select name=&fourthLevelId& id=&fourthLevelId&&
&option value=&0& id=&fourthOption&&
请选择四级分类
.if($(&#thirdLevel&).val()!=0){
$(&#thirdLevel option[value!=0]&).remove();
if($(&#fourthLevelId&).val()!=0){
$(&#fourthLevelId option[value!=0]&).remove();
}//这个表示：假如我们希望当选择选择第三类时：如果第四类中有数据则删除，如果没有数据第四类的商品中的为默认值。在后面学习了AJAX技术后经常会使用到！
获取Select ：
获取select 选中的 text :
$(&#ddlRegType&).find(&option:selected&).text();
获取select选中的 value:
$(&#ddlRegType &).val();
获取select选中的索引:
$(&#ddlRegType &).get(0).selectedI
设置select:
设置select 选中的索引：
$(&#ddlRegType &).get(0).selectedIndex=//index为索引值
设置select 选中的value：
$(&#ddlRegType &).attr(&value&,&Normal“);
$(&#ddlRegType &).val(&Normal&);
$(&#ddlRegType &).get(0).value =
设置select 选中的text:
var count=$(&#ddlRegType option&).
for(var i=0;i&i++)
if($(&#ddlRegType &).get(0).options[i].text == text)
$(&#ddlRegType &).get(0).options[i].selected = true;
$(&#select_id option[text='jQuery']&).attr(&selected&, true);
设置select option项:
$(&#select_id&).append(&&option value='Value'&Text&/option&&);
//添加一项option
$(&#select_id&).prepend(&&option value='0'&请选择&/option&&); //在前面插入一项option
$(&#select_id option:last&).remove(); //删除索引值最大的Option
$(&#select_id option[index='0']&).remove();//删除索引值为0的Option
$(&#select_id option[value='3']&).remove(); //删除值为3的Option
$(&#select_id option[text='4']&).remove(); //删除TEXT值为4的Option
清空 Select:
$(&#ddlRegType &).empty();
jquery获得值：
.val('在这里设置值')
$(&document&).ready(function(){
$(&#btn1&).click(function(){
$(&[name='checkbox']&).attr(&checked&,'true');//全选
$(&#btn2&).click(function(){
$(&[name='checkbox']&).removeAttr(&checked&);//取消全选
$(&#btn3&).click(function(){
$(&[name='checkbox']:even&).attr(&checked&,'true');//选中所有奇数
$(&#btn4&).click(function(){
$(&[name='checkbox']&).each(function(){//反选
if($(this).attr(&checked&)){
$(this).removeAttr(&checked&);
$(this).attr(&checked&,'true');
$(&#btn5&).click(function(){//输出选中的值
var str=&&;
$(&[name='checkbox'][checked]&).each(function(){
str+=$(this).val()+&rn&;
//alert($(this).val());
alert(str);
感谢关注 Ithao123Jquery频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
Hadoop是一个由Apache基金会所开发的分布式系统基础架构。
用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。
Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。
Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。
产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
IThao123周刊关于javascript控制复选框全选，必须选一个，控制个数代码-android100学习网
关于javascript控制复选框全选，必须选一个，控制个数代码
＜script type=＂text/javascript教程＂＞function check(){    var f=document.getelementbyid(＂form1＂)
&script type="text/javascript教程"&
function check()
&&& var f=document.getelementbyid("form1");
&&& var obj=document.getelementsbyname("user");
&&& for(var i=0;i&obj.i++)
&&&&&&& if(obj[i].checked==true)
&&&&&&&&&&& var flag="ok";
&&&&&&&&&&&
&&& if(flag != "ok")
&&&&&&& alert("请选择收件人！");
&input type="checkbox" name="user" value="1" /&
&input type="checkbox" name="user" value="2" /&
&input type="submit" name="submit1" onclick="return check()" value="发送" /&
&script language=javascript教程&&&&&
//第一种方法&&&&
function selectall1()&&&&
&& var a = document.getelementsbytagname("input");&&&&
&& if(a[0].checked==true){&&&&
&& for (var i=0; i&a. i++)&&& &="" span=""&
&&&&& if (a[i].type == "checkbox") a[i].checked =&&&&
&& else&&&&
&& for (var i=0; i&a. i++)&&& &="" span=""&
&&&&& if (a[i].type == "checkbox") a[i].checked =&&&&
//第二种方法&&&&
function selectall2() {&&&&
&var tform = document.forms['form1'];&&&&
&for (var i=0;i&tform.i++)&&& &="" span=""&
& var e = tform.elements[i];&&&&
& if (e.type == "checkbox")&&&&
&& e.checked = !e.&&&&
//第三种方法，结合上述两种方法&&&&
function selectall3()&&&&
&& var a = document.getelementsbytagname("input");&&&&
&& for (var i=0; i&a. i++)&&& &="" span=""&
&&&&& if (a[i].type == "checkbox") a[i].checked =!a[i].&&&&
//第四种方法&&&&
function selectall4(id){ //用id区分&&&&&
var tform=document.forms['form1'];&&&&&
for(var i=0;i&tform.i++){&&&& &="" span=""&
var e=tform.elements[i];&&&&&
if(e.type=="checkbox" && e.&}&&&&&
//第五种方法&&&&
function selectall(theform,thename){ //theform指定的form,thename是checkbox的name属性&&&&
var tform=document.forms[theform];&&&&
document.getelementbyid("thewen").value='反选';&&&&
for(var i=0;i&tform.i++){&&& &="" span=""&
&& var e=tform.elements[i];&&&&
&& if(e.type=='checkbox' && e.&& }&&&&
&/script&&&&
控制checkbox个数
&html&&head&&title&dddd&/title&
&script language="javascript"&
function cc()
var oc=document.form1.
&for(var i=0;i&oc.i++){
& if(oc(i).checked) t++
if(t&7 && t&9) alert("你只能选择7个,但是你却选择了" + t + "个");
&script language="javascript"&
&form name="form1" id="form1" action="nextpage.htm" &
请最多选择7个项目：
&input type="checkbox" value="crc" name="sitem"&&www.111cn.net &br/&
&input type="checkbox" value="northsnow" name="sitem" id="checkbox1"& 塞北的雪 &br/&
&input type="checkbox" value="csdn" name="sitem" id="checkbox2"& 中国最大的开发者网络 &br/&
&input type="checkbox" value="a" name="sitem" id="checkbox3"& 飞 &br/&
&input type="checkbox" value="b" name="sitem" id="checkbox4"& 雪 &br/&
&input type="checkbox" value="c" name="sitem" id="checkbox5"& 连 &br/&
&input type="checkbox" value="d" name="sitem" id="checkbox6"& 天 &br/&
&input type="checkbox" value="e" name="sitem" id="checkbox7"& 射 &br/&
&input type="checkbox" value="f" name="sitem" id="checkbox8"& 白 &br/&
&input type="checkbox" value="g" name="sitem" id="checkbox9"& 鹿 &br/&
&input type="button" name="ss" value="ok" onclick="cc();"&}