js实现(全选)多选按钮的方法【附实例】

2024-04-26 03:32:22

第一种，全部选中：

<html>
 <head>
   <title>复选框checked属性</title>
   <script language="JavaScript" type="text/javascript">
      function changeState(isChecked)
     {
       var chk_list=document.getElementsByTagName("input");
       for(var i=0;i<chk_list.length;i++)
        {
         if(chk_list[i].type=="checkbox")
          {
           chk_list[i].checked=isChecked;
          }
        }
    }
   </script>
 </head>
 <body>
   <h1>请选择你的爱好</h1>
   <form name="myForm1">
     <input type="checkbox" name="cb1" checked>看书<br>
     <input type="checkbox" name="cb2" checked>上网<br>
     <input type="checkbox" name="cb3">游戏<br>
   </form>
   <hr>
   <form name="myForm2">
     <input type="checkbox" name="cb" onclick="changeState(this.checked)">全选
   </form>
 </body>
</html>

效果如下：

第二种，选中指定的。

以上这篇js实现(全选)多选按钮的方法【附实例】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

利用Vue.js指令实现全选功能

因为刚开始接触vue不久,全选的实现参考了知乎上的实现方法: 1.从服务器拿到数据,为每个item设置checked属性 2.计算选中的数量selectCount,如果选中的数量与selectItems的数量相等,则全选selectAll选中 3.点全选时,将每个item的checked属性置为true,反选时置为false, 4.每次selectItems的属性发生变化时,都将checked的为true的item放入数组checkedGroups中下面为实现代码: //全选 data: fu
使用javascript实现ListBox左右全选,单选,多选,全请

复制代码代码如下: <html><head> <meta http-equiv="Content-Type " content="text/html; charset=gb2312 "> <title>list测试</title></head><body> <div style="font-size: 10pt;">
js表单处理中单选、多选、选择框值的获取及表单的序列化

本文总结了下在表单处理中单选.多选.选择框值的获取及表单的序列化,写成了一个对象.如下: var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value != '')
JS实现CheckBox复选框全选全不选功能

CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭.大多数应用程序的"设置"对话框内均有此控件.我们看到的可以打勾的就是CheckBox. 该控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBo
兼容ie和firefox版本的js反选全选多选框

朋友们说不兼容.昨天晚上回去调试了一个兼容版本: 复制代码代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <script language="javascript"> function selectIt(action){ var testform=document.g
使用js如何实现全选与全不选

js: 复制代码代码如下: function checkAll(name) { var el = document.getElementsByTagName('input'); var len = el.length; for(var i=0; i<len; i++){ if((el[i].type=="checkbox") && (el[i].name==name)){ el[i].checked = true; } } } function clearAll
使用vue.js实现checkbox的全选和多个的删除功能

template代码: <template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr">
AngularJS单选框及多选框实现双向动态绑定

在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令. 一.ng-model ng-model指令用来将input.select.textarea或自定义表单控件同包含它们的作用域中的属性进行绑定.它将当前作用域中运算表达式的值同给定的元素进行绑定.如果属性不存在,它会隐式创建并将其添加到当前作用域中. 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖! <input type="te
js实现功能比较全面的全选和多选

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <inp
比较全的JS checkbox全选、取消全选、删除功能代码

看下面两种实现方法: JS checkbox 方法一: 复制代码代码如下: function checkAll() { var code_Values = document.all['code_Value']; if(code_Values.length){ for(var i=0;i<code_Values.length;i++) { code_Values[i].checked = true; } }else{ code_Values.checked = true; } } functio

js实现(全选)多选按钮的方法【附实例】

相关推荐

随机推荐