当前位置:  Web服务器/前端>html/css

javascript操作html复选框checkbox:如何判断复选框是否被选中

 
分享到:
    发布时间:2014-7-16  


    本文导语:  javascript操作html复选框checkbox:如何判断复选框是否被选中 (由www.169it.com搜集整理) 在PHP中,html复选框checkbox被选中,则提交的值是on,否则就是空,所以可以通过value值判断是否被选中。在JavaScript中,貌似不管您选还是...

  javascript操作html复选框checkbox:如何判断复选框是否被选中 (由www.169it.com搜集整理)

  在PHP中,html复选框checkbox被选中,则提交的值是on,否则就是空,所以可以通过value值判断是否被选中。在JavaScript中,貌似不管您选还是没选中,value总是显示on,所以不能通过value判断,要检测checked的值,如果复选框被选中,则obj.checked = true否则就是false

   那么如何判定一组复选框是否有被选中的呢?

   既然称为复选框组,必然是含有相同的name了,所以通过getElementsByName获取这组复选框,在for循环中依次判断。

   例如,见下面的HTML代码:

<input type="checkbox" name="test" />圣诞节
<input type="checkbox" name="test" />股市
<input type="checkbox" name="test" />阿凡达
<input type="checkbox" name="test" />十月围城
<input type="checkbox" name="test" />水价上调
<input type="button" value="检测" id="btn" />


相应的JavaScript代码为:

var btn = document.getElementById("btn");
var test = document.getElementsByName("test");
btn.onclick = function(){
for(var i=1; i<=test.length; i+=1){
if(test[i-1].checked){
alert("当前有选中!");
return;
}
}
alert("一个也没有选!");
};



如何使用javascript来设置checkbox的选中状态


首先,同个区域的checkbox都取相同名称,即

<input type="checkbox" name="ck" value="..." />

假设为ck.

处理区域的按钮的单击事件onclick

<input type="button" value="第一区域" onclick="selectAll()" />
function selectAll() {
var cks = document.getElementsByName("ck");
for(var i = 0; i < cks.length; i++) {
   if(cks[i].type == "checkbox") {
       cks[i].checked = true;
   }
}
}


相关文章推荐:
  • HTML网页中的javaScript自动跳转方法介绍及javaScript自动跳转代码示例
  • Javascript 游戏引擎 cocos2d javascript
  • 通过javascript实现DIV居中,兼容各浏览器版本
  • JavaScript的OAuth开发包 OAuth in JavaScript
  • javascript 添加到收藏夹和书签代码示例
  • Javascript 调试插件
  • javascript eval换成document.write 显示原型
  • JavaScript图表 JScharts
  • 通过javascript库JQuery实现页面跳转功能代码
  • JavaScript 开发环境 UltraREPL
  • JavaScript实现页面跳转的几种方法(参考代码)
  • JavaScript 模板引擎 templayed.js
  • JavaScript中的消息框(警告框,确认框,提示框)语法
  • Pretty Beautiful Javascript
  • JavaScript 微处理器 Espruino
  • JavaScript InfoVis Toolkit
  • JavaScript 调试工具 JSDT
  • JavaScript图表组件 dhtmlxChart
  • mozilla 是不是不支持javaScript
  • javascript矩阵运算库 Sylvester
  • JavaScript开发插件 JSEclipse


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

    浙ICP备11055608号