当前位置: 首页 > 编程笔记 >

js 实现复选框只能选择一项的示例代码

慕凡
2023-03-14
本文向大家介绍js 实现复选框只能选择一项的示例代码,包括了js 实现复选框只能选择一项的示例代码的使用技巧和注意事项,需要的朋友参考一下

实例如下所示:

<!DOCTYPE HTML>
<html>
<head>
 <title></title>
</head>
<body>
<ul>
 <li><input type="checkbox" name="ss" onclick="choose(this)">1</li>
 <li><input type="checkbox" name="ss" onclick="choose(this)">2</li>
 <li><input type="checkbox" name="ss" onclick="choose(this)">3</li>
 <li><input type="checkbox" name="ss" onclick="choose(this)">4</li>
 <li><input type="checkbox" name="ss" onclick="choose(this)">5</li>
</ul>
<script language="JavaScript">
 function choose(obj){
  var ss= document.getElementsByName("ss");
  for (var i = 0; i < ss.length; i++) {
   ss[i].checked = false;
  }
  obj.checked = true;
 }
</script>
</body>
</html>

以上这篇js 实现复选框只能选择一项的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Js实现复选框的全选、全不选反选功能代码实例,包括了Js实现复选框的全选、全不选反选功能代码实例的使用技巧和注意事项,需要的朋友参考一下 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 结果 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍javascript实现checkbox复选框实例代码,包括了javascript实现checkbox复选框实例代码的使用技巧和注意事项,需要的朋友参考一下 本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作,分享给大家供大家参考,具体内容如下 1、checkbox复选框进行美化操作 复选框默认外表的美观度差强人意,能够满足美

  • 本文向大家介绍JS实现点击复选框变更DIV显示状态的示例代码,包括了JS实现点击复选框变更DIV显示状态的示例代码的使用技巧和注意事项,需要的朋友参考一下 首先是页面上: 然后是jquery中的实现 以上这篇JS实现点击复选框变更DIV显示状态的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍vue.js实现单选框、复选框和下拉框示例,包括了vue.js实现单选框、复选框和下拉框示例的使用技巧和注意事项,需要的朋友参考一下 Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。 一、单选框   在传统的HTML中实现单选框的方法如下: 注:这里name属性值必

  • 本文向大家介绍JS实现复选框的全选和批量删除功能,包括了JS实现复选框的全选和批量删除功能的使用技巧和注意事项,需要的朋友参考一下 如图示: 功能描述:在勾选了全选时,所有的商品都会勾选,在取消全选时,取消所有物品的勾选。如果点击批量删除,删除所勾选的商品。 如代码所示,全选/全不选的复选框添加onclick事件。每当点击了这个复选框时,触发ckAll事件。在ckAll()方法中,我们首先获得al

  • 本文向大家介绍js html css实现复选框全选与反选,包括了js html css实现复选框全选与反选的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。