课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > 昆明java培训——js获取单选框或复选框值及操作
  • 昆明java培训——js获取单选框或复选框值及操作

    发布:昆明Java培训      来源:达内新闻      时间:2016-04-15

  • 在实际应用中,偶尔会用到复选框checkbox的值,那么如何获取它的值呢?昆明java培训中心会介绍使用js获取复选框值,需要的同学可以了解下:

    代码如下:

    <script>

    function checkbox()

    {

    var str=document.getElementsByName("box");

    var objarray=str.length;

    var chestr="";

    for (i=0;i<objarray;i++)

    if(str[i].checked == true)

    {

    chestr+=str[i].value+",";

    }

    if(chestr == "")

    {

    alert("请先选择一个爱好~!");

    }

    else

    {

    alert("您先择的是:"+chestr);

    }

    }

    </script>

    选择您的爱好:

    <input type="checkbox" ame="box" id="box1" value="跳水" />跳水

    <input type="checkbox" ame="box" id="box2" value="跑步" />跑步

    <input type="checkbox" ame="box" id="box3" value="听音乐" />听音乐

    <input type="button" ame="button" id="button" onclick="checkbox()" value="提交" />

    代码如下:

    <!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">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css" media="all">

    label{

    cursor:pointer;

    font-size:12px;

    margin:0px 2px 0px 0px;

    color:#2B86BD;

    }

    .d0{

    margin-bottom:30px;

    }

    .d0 input{

    cursor:pointer;

    margin:0px;

    padding:0px 2px;

    }

    </style>

    <script language="javascript" type="text/javascript">

    var dr=document.getElementsByTagName("div"),i,t="";

    function submit1(num,type){

    t="";

    var dri=dr[num].getElementsByTagName("input");

    for(i=0;i<dri.length;i++){

    if(dri[i].checked){

    if(type==0){

    alert(dri[i].value);

    break;

    }else{

    t=t+dri[i].value+";";

    }

    }

    }

    if(type==1) alert(t);

    }

    //ChangeSelect

    submit1.allselect=function(){

    var drc=dr[1].getElementsByTagName("input");

    for(i=0;i<drc.length;i++){

    drc[i].checked=true;

    }

    }

    //allNot

    submit1.allNot=function(){

    var drc=dr[1].getElementsByTagName("input");

    for(i=0;i<drc.length;i++){

    drc[i].checked=false;

    }

    }

    //reverse

    submit1.reverseSelect=function(){

    var drc=dr[1].getElementsByTagName("input");

    for(i=0;i<drc.length;i++){

    if(drc[i].checked){

    drc[i].checked=false;

    }else{

    drc[i].checked=true;

    }

    }

    }

    </script>

    <title>js获取单选框、复选框的值及操作</title>

    </head>

    <body>

    <div class="d0">

    <input type="radio" ame="day" id="r0" value="前天"/><label for="r0">前天</label>

    <input type="radio" ame="day" id="r1" value="昨天"/><label for="r1">昨天</label>

    <input type="radio" ame="day" id="r2" checked="checked" value="今天"/><label for="r2">今天</label>

    <input type="radio" ame="day" id="r3" value="明天"/><label for="r3">明天</label>

    <input type="radio" ame="day" id="r4" value="后天"/><label for="r4">后天</label>

    <button type="button" onclick="submit1(0,0)" >提交</button>

    </div>

    <div>

    <input type="checkbox" value="前年" onclick="alert(this.value);"/><label>前年</label>

    <input type="checkbox" value="去年" onclick="submit1(1,1);"/><label>去年</label>

    <input type="checkbox" value="今年" /><label>今年</label>

    <input type="checkbox" value="明年"/><label>明年</label>

    <input type="checkbox" value="后年"/><label>后年</label>

    <button type="button" onclick="submit1(1,1)" >提交</button>

    <button type="button" onclick="submit1.allselect()" >全选</button>

    <button type="button" onclick="submit1.reverseSelect()" >反选</button>

    <button type="button" onclick="submit1.allNot()" >全不选</button>

    </div>

    </body>

    </html>

    单选框和复选框对于很多新手来说可能觉得意义不是很大,但是考虑到后期系统使用的便捷性以及工作效率考虑,你现在的一个选择,关乎到以后的使用哦,在选择上有不懂得,欢迎咨询昆明java培训机构

    推荐文章

上一篇:Android中的资源是指非代码部分,指外部文件。

下一篇:js利用控件对windows的操作实现原理

最新开班日期  |  更多

Java--零基础全日制班

Java--零基础全日制班

开班日期:12/29

Java--零基础业余班

Java--零基础业余班

开班日期:12/29

Java--周末提升班

Java--周末提升班

开班日期:12/29

Java--零基础周末班

Java--零基础周末班

开班日期:12/29

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56