`

checkbox处理

JavaScriptHTML 
阅读更多
xml 代码
  1. <html>  
  2. <head>  
  3.   <meta http-equiv="Content-type" content="text/html; charset=utf-8">  
  4.   <title>cb</title>  
  5.   <script type="text/javascript" charset="utf-8">  
  6.     var get_all_checkboxs = function(container_id) {   
  7.       var inputs;   
  8.       var container;   
  9.   
  10.       if(container_id == undefined) {   
  11.         inputs = document.getElementsByTagName('input');   
  12.       } else {   
  13.         container = document.getElementById(container_id);   
  14.         if(container == 'undefined') {   
  15.           alert('param have error.');   
  16.         } else {   
  17.           inputs = container.getElementsByTagName('input');   
  18.         }   
  19.       }   
  20.       return inputs   
  21.     };   
  22.        
  23.     //status ["select", "unselect", "reverseSelect"]   
  24.     var process_checkbox = function(inputs, status) {   
  25.       if(inputs.length == 0) {   
  26.         alert('have not checkbox.');   
  27.       } else {   
  28.         for(var i = 0; i < inputs.length; i++) {   
  29.           input = inputs[i];   
  30.           if(input.type == 'checkbox') {   
  31.             switch(status) {   
  32.               case 'select':   
  33.                 input.checked = 'checked';   
  34.                 break;   
  35.               case 'unselect':   
  36.                 input.checked = '';   
  37.                 break;   
  38.               case 'reverseSelect':   
  39.                 if(input.checked) {   
  40.                   input.checked = '';   
  41.                 } else {   
  42.                   input.checked = 'checked';   
  43.                 }   
  44.                 break;   
  45.             } // switch   
  46.           }   
  47.         } // for    
  48.       } //if    
  49.     };   
  50.        
  51.     var all_select = function(params) {   
  52.       process_checkbox(get_all_checkboxs(params.container), 'select');   
  53.     };   
  54.        
  55.     var all_unselect = function(params) {   
  56.       process_checkbox(get_all_checkboxs(params.container), 'unselect');   
  57.     };   
  58.        
  59.     var reverse_select = function(params) {   
  60.       process_checkbox(get_all_checkboxs(params.container), 'reverseSelect');   
  61.     };   
  62.        
  63.     // container default document   
  64.     // attr_name    
  65.     var get_all_select_values = function(params) {   
  66.       var inputs = get_all_checkboxs(params.container);   
  67.       var values = [];   
  68.       if(inputs.length == 0) {   
  69.         alert('have not checkbox.');   
  70.       } else {   
  71.         for(var i = 0; i < inputs.length; i++) {   
  72.           var input = inputs[i];   
  73.           if((input.type == 'checkbox')&&(input.checked)) {   
  74.             values.push(input.getAttribute(params.attr_name || 'value'));   
  75.           }   
  76.         } // for   
  77.       }   
  78.          
  79.       return values;   
  80.     };   
  81.   </script>  
  82. </head>  
  83. <body id="cb" onload="">  
  84.   <input type="checkbox" name="some_name" value="1" id="some_name">  
  85.   <input type="checkbox" name="some_name" value="1" id="some_name">  
  86.   <input type="checkbox" name="some_name" value="1" id="some_name">  
  87.   <input type="checkbox" name="some_name" value="1" id="some_name">  
  88.   <input type="checkbox" name="some_name" value="1" id="some_name">  
  89.   <input type="checkbox" name="some_name" value="1" id="some_name">  
  90.   <div id="div_container" style="border: 2px solid red;">  
  91.     <input type="checkbox" name="some_name" value="2" id="some_name">  
  92.     <input type="checkbox" name="some_name" value="2" id="some_name">  
  93.     <input type="checkbox" name="some_name" value="2" id="some_name">  
  94.     <input type="checkbox" name="some_name" value="2" id="some_name">  
  95.     <input type="checkbox" name="some_name" value="2" id="some_name">  
  96.     <input type="checkbox" name="some_name" value="2" id="some_name">  
  97.   </div>  
  98.   <div>  
  99.   <input type="button" name="some_name" value="all select" id="some_name" onclick="all_select({})">  
  100.   <input type="button" name="some_name" value="all unselect" id="some_name" onclick="all_unselect({})">  
  101.   <input type="button" name="some_name" value="all reverse select" id="some_name" onclick="reverse_select({})">  
  102.   </div>  
  103.   <div>  
  104.   <input type="button" name="some_name" value="all select" id="some_name" onclick="all_select({container: 'div_container'})">  
  105.   <input type="button" name="some_name" value="all unselect" id="some_name" onclick="all_unselect({container: 'div_container'})">  
  106.   <input type="button" name="some_name" value="all reverse select" id="some_name" onclick="reverse_select({container: 'div_container'})">  
  107.   </div>  
  108.   <div>  
  109.   <input type="button" name="some_name" value="all get_all_select_values" id="some_name" onclick="alert(get_all_select_values({attr_name: 'value'}));">  
  110.   <input type="button" name="some_name" value="get_all_select_values" id="some_name" onclick="alert(get_all_select_values({container: 'div_container', attr_name: 'value'}));">  
  111.   <input type="button" name="some_name" value="get_all_select_values" id="some_name" onclick="alert(get_all_select_values({}));">  
  112.   <input type="button" name="some_name" value="get_all_select_values" id="some_name" onclick="alert(get_all_select_values({container: 'div_container'}));">  
  113.   </div>  
  114. </body>  
  115. </html>  
分享到：
| 删除记录
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    MFC ListControl 中checkbox 处理 图标ICON

    在这个特定的场景中，我们关注的是如何在ListControl中添加复选框（Checkbox）并展示图标（ICON）。下面将详细介绍如何在VC 6.0 MFC环境下实现这一功能。 首先，我们需要理解CListCtrl类的基本结构。CListCtrl是MFC...

    listcontrol中增加checkBox处理

    在某些情况下，我们可能需要在List Control中添加复选框（CheckBox），以便用户可以对列表项进行选择或状态设定。本文将详细介绍如何在MFC的List Control中实现这一功能。 首先，我们需要了解List Control的基本...

    JS控制checkboxJS控制checkboxJS控制checkbox

    五、表单提交时的checkbox处理 在表单提交时，只有被选中的checkbox才会包含在提交的数据中。可以通过`form.elements`来访问表单元素，包括checkbox： ```javascript var form = document.getElementById('myForm')...

    checkbox的数组传值

    ### Struts框架中的Checkbox处理 #### 1. **Struts标签库** Struts是Java Web应用开发的一个流行框架，提供了丰富的标签库来简化HTML表单的生成和数据绑定。在处理复选框（checkbox）时，Struts的`&lt;s:checkbox&gt;`...

    checkBox分别处理选中与不选中

    ### checkBox分别处理选中与不选中 在Web开发中，`checkbox`是一种常见的表单元素，用于收集用户的选择信息。通常情况下，一个`checkbox`只能代表一项选择，但可以通过设置多个`checkbox`来实现多选功能。本文将...

    listview中的checkbox的几种处理方式

    本篇文章将详细探讨三种处理ListView中Checkbox的方法。 ### 方法一：使用BaseAdapter #### 1. 自定义Adapter 首先，我们需要创建一个继承自BaseAdapter的自定义Adapter，这个Adapter将负责填充ListView的数据，并...

    PB 11.5 CheckBox三种状态的实例

    本实例将详细讲解如何实现CheckBox控件的三种状态：未选中、已选中以及灰色禁用状态，并探讨它们在实际应用中的配置和事件处理。 1. CheckBox的基本结构： CheckBox控件在界面中通常表现为一个小方框，里面可能有...

    带CheckBox的TreeView控件

    而在WPF中，TreeView控件提供了一种更直接的方法，通过CheckBoxTemplate来绑定数据，并且可以轻松处理CheckBox的状态改变事件。 1. **CheckBox与TreeView联动原理**： - 每个TreeViewNode（在WPF中是TreeViewItem...

    WPF 自定义CheckBox样式

    在实际应用中，可能还需要处理鼠标悬停、点击等交互状态，以及调整布局和样式以适应不同的设计风格。这些都可以通过扩展上述模板并在Visual State Manager中定义更多状态来实现。 通过这种方式，我们可以轻松地将...

    WPF之CheckBox组的全选设计

    6. **使用HasFlag方法**：在处理子CheckBox的Click事件时，可以通过`HasFlag`方法检查当前选中的选项是否已包含在全选状态中，从而决定全选CheckBox的IsChecked状态。 7. **样式和模板**：为了提高用户体验，可以...

    C# WinForm 自定义CheckBox

    首先，自定义CheckBox控件主要是为了扩展其默认功能，比如改变其外观、添加额外的事件处理或者提供更复杂的交互逻辑。在VS2005中，我们可以创建一个新的UserControl类，以此为基础构建我们的自定义CheckBox控件。...

    C#WinForm控件美化CheckBox

    在Windows Forms（WinForm）开发中，CheckBox控件是一个基础且重要的元素，用于实现用户界面中的复选框功能。在.NET 2.0版本和Visual Studio 2005（VS2005）环境下，开发者可以利用丰富的特性来定制和美化这些控件，...

    循环动态判断checkbox是否被选中

    - **事件处理**：除了通过遍历来检测`Checkbox`的状态外，还可以通过绑定事件处理程序来响应`Checkbox`状态的变化。例如，可以为每个`Checkbox`绑定`CheckedChanged`事件处理程序。 ```csharp protected void ...

    DuiLib_CheckBox

    总之，DuiLib_CheckBox是一种增强DuiLib库中CheckBox控件功能的方法，使得其可以处理更复杂的多选场景。通过自定义控件、扩展事件处理和状态管理，开发者可以为用户提供更加直观和便捷的操作方式，从而提高应用程序...

    android CheckBox的使用

    这个项目可能包含了XML布局文件、Java活动类以及可能的数据模型类，展示了如何在Android应用中使用CheckBox并处理其状态变化。 总之，Android的CheckBox组件是实现多选功能的关键，通过XML布局和Java代码的配合，...

    解决ListView嵌套CheckBox滑动时选中状态错乱

    总结来说，解决ListView嵌套CheckBox滑动时的选中状态错乱问题，需要深入理解ListView的工作机制，合理利用ViewHolder，正确绑定数据，监听并处理CheckBox的状态变化，以及适当地处理点击事件。通过这些步骤，可以...

    遍历CheckBoxList,获得选中项的值动态绑定CheckBoxList代码

    ### 遍历CheckBoxList,获得选中项的值动态绑定CheckBoxList #### 知识点一：CheckBoxList概述及应用场景 **CheckBoxList** 是ASP.NET Web Forms中一个非常有用的控件，它允许用户选择一个或多个选项。CheckBoxList...

Magicbox
Global site tag (gtag.js) - Google Analytics