jquery checkbox 循环

最新推荐文章于 2023-04-23 23:34:16 发布
原创 最新推荐文章于 2023-04-23 23:34:16 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #input #function #button #javascript #html

本文介绍了一种使用jQuery简化Checkbox操作的方法，包括全选、取消全选、选中奇数项及反选等功能，并展示了如何获取所有被选中的Checkbox值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
   $("document").ready(function(){
    
    $("#btn1").click(function(){
     
    $("[name='checkbox']").attr("checked",'true');//全选
 
    })
       $("#btn2").click(function(){
     
    $("[name='checkbox']").removeAttr("checked");//取消全选
 
    })
    $("#btn3").click(function(){
     
    $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
 
    })
    $("#btn4").click(function(){
     
    $("[name='checkbox']").each(function(){
     
   
     if($(this).attr("checked"))
   {
    $(this).removeAttr("checked");
    
   }
   else
   {
    $(this).attr("checked",'true');
    
   }
   
    })
 
    })
     $("#btn5").click(function(){
    
    var str="";
    $("[name='checkbox'][checked]").each(function(){
      str += $(this).val();
      alert(str);
    })

    })
   })
  //-->
  </SCRIPT>
 
 </HEAD>

 <BODY>
 <form name="form1" method="post" action="">
   <input type="button" id="btn1" value="全选">
   <input type="button" id="btn2" value="取消全选">
   <input type="button" id="btn3" value="选中所有奇数">
   <input type="button" id="btn4" value="反选">
   <input type="button" id="btn5" value="获得选中的所有值">
   <br>
   <input type="checkbox" name="checkbox" value="checkbox1">
   checkbox1
   <input type="checkbox" name="checkbox" value="checkbox2">
   checkbox2
   <input type="checkbox" name="checkbox" value="checkbox3">
   checkbox3
   <input type="checkbox" name="checkbox" value="checkbox4">
   checkbox4
   <input type="checkbox" name="checkbox" value="checkbox5">
   checkbox5
   <input type="checkbox" name="checkbox" value="checkbox6">
   checkbox6
   <input type="checkbox" name="checkbox" value="checkbox7">
   checkbox7
   <input type="checkbox" name="checkbox" value="checkbox8">
 checkbox8
 </form>

checkbox的 全选全不选，反选，奇偶选择，获取checkbox值
芬梧书生的博客
01-02 194
&lt;input type="button" id="check_all" value="全选"&gt; &lt;input type="button" id="check_none" value="全不选"&gt; &lt;input type="checkbox" name="test"
jquery 实现checkbox全选，反选，全不选等功能代码(奇数)
YFCMS博客
05-02 726
jquery 实现全选，反选，全不选等功能，下面直接以例子进行说明,需要的朋友可以参考下 设页面有如下一组复选框和几个相关按钮（全选，反选，全不选等）： 苹果 橘子 香蕉 葡萄 则分别实现相关功能的完整代码如下： $(function(){ $('#btn1').click(function(){//全选 $("[name='frui
JQuery对checkbox操作 （循环）
luofuIT成长记录
12-01 894
转自：http://www.cnblogs.com/shuang121/archive/2011/05/19/jquery.html @ Page Language="C#" AutoEventWireup="true" CodeFile="DemoCheckBox.aspx.cs" Inherits="DemoCheckBox" %> DOCTYPE html PUBLIC "-//W3
摘录--多选框-全选-取消全选-反选-选中所有奇数-选中所有偶数-获得选中的所有值...
我的技术博客
06-28 155
无标题页 jQuery(function($){ //全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) //取消全选 $("#btn2").click(function(){ $("input[name='c.
jQuery实现CheckBox全选、全不选以及获取选中的值
yaoyyl的博客
10-05 450
jQuery实现CheckBox全选、全不选             $(function() {         //判断是否全选            $("#checkAll").click(function() {                 $('input[name="subBox"]').attr("checked",this.checked);        
Jquery为单选框checkbox绑定单击click事件
12-11
input id=”checkbox-518″ class=”imagezz” name type=”checkbox” value=”518″> </dd> 选中事件（根据选中情况修改上一层背景）： 代码如下: var $test_image_check_box_click = function() { if ($(this)...
jQuery操作复选框(CheckBox)的取值赋值实现代码
10-20
若要获取多个复选框的选中状态，就需要使用循环遍历所有复选框，并检查每个元素的“checked”属性。如果复选框被选中，则可以执行某些操作，例如弹出警告框显示选中的值。这段代码同样使用了jQuery的.each()方法来...
jquery checkbox全选反选效果代码
12-04
3. 实现全选和反选的基本原理是：获取所有checkbox的DOM对象，并通过循环设置它们的checked属性为true（全选）或false（反选）。 4. 在jQuery中，可以通过选择器来选取所有的checkbox，然后通过.each()方法来遍历...
JQuery对checkbox操作 （循环获取）
10-28
在本示例中，我们关注的是 jQuery 对 checkbox 的操作，特别是如何进行全选、反选、取消全选以及按特定条件选择 checkbox。下面将详细解析这些功能的实现方式： 1. **全选**： 当用户点击“全选”按钮（id="btn1...
jQuery操作checkbox并获取选中值
12-03
本文将详细讲解如何使用jQuery来操作checkbox，并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中，我们可以使用不同的选择器来选取页面上的checkbox元素。...
隐藏layui数据表格表头的checkbox复选框
12-02
一行代码搞定layui数据表格的表头checkbox复选框隐藏问题。
layui 动态设置checbox 选中状态的例子
12-09
最近在使用layui前端框架，在使用单选按钮、下拉菜单select、checkbox等控件的时候 往往遇到一些初始化的东西。 有时候会发现，自己动态append进去的代码要不就是没有显示，要不就是初始化默认选中出问题。 以上这些情况进行了测试： 第一种情况：动态append()html代码后没有显示空间的解决方案： 添加 layui.form.render();//重新渲染 可以解决多种没有显示的情况 第二种情况：动态设置默认选中状态没有效果解决方案： 细分为两种情况： （1）在html页面代码下(没有在layer初始化框架中，即没有在layui.use([], function(){ })
jquery实现获取指定name或ID的多个选中checkbox
热门推荐
斗小小小飞的博客
11-18 1万+
例一：获取指定name=video的所有选中checkboxvar checkedFiles = $("inpt:checkbox[name=video]:checked"); //通过Jquery获取指定name的选中checkbox $.each(checkedFiles,function (key,box) { //循环遍历获取到的checkboxs if (box.val() !
JQuery选择器，选择ID以xx开头的一组标签
weixin_40206441的博客
03-29 4282
$(“button[id^=‘my_button’]”) 选择所有的id属性以’bottom’开头的input元素 (&quot;input[id(&quot;input[id("input[id=‘bottom’]") 选择所有的id属性以’bottom’结尾的input元素 $(“input[id*=‘contain’]”) 选择所有的id属性包含’co...
layui的数据表格table根据数据库内容将复选框设为选中状态
qq_53932517的博客
04-23 2719
根据数据库中某一属性值使页面中的复选框自动选中
【Layui】------ Layui Table 点击行选中示例代码
皮皮冰要做大神
01-11 6431
layui table 点击行选中实例 //单击行勾选checkbox事件 $(document).on("click", ".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tab...
Layui与JavaScript复选框全选/全不选和单独选择功能：程序员成长之路上的问题与解决方案实战
juedaifenghua2的博客
04-20 2246
Layui与JavaScript复选框全选/全不选和单独选择功能：程序员成长之路上的问题与解决方案实战
layui 复选框全选
qq_40761737的博客
05-25 3719
layui 复选框实现多选全选
mvc jquery checkbox支持多选
最新发布
03-16
<think>好的，用户的问题是关于在MVC和jQuery中实现checkbox的多选功能，需要示例教程。首先，我得理解用户的具体需求。他们可能是在开发一个Web应用，需要让用户通过勾选多个复选框来进行批量操作，比如选择多个用户进行删除或更新。接下来，我需要回忆MVC框架中如何处理表单，特别是复选框，以及如何使用jQuery来增强前端交互。 首先，MVC部分，特别是ASP.NET MVC，通常会使用HtmlHelper来生成表单控件。对于复选框，Html.CheckBoxFor或者Html.EditorFor可能是常用的方法。记得在模型中，可能需要一个集合来保存选中的值，比如一个List<int> SelectedUserIds。然后，在视图中循环生成每个用户的复选框，确保每个checkbox的name属性正确，以便模型绑定器能够正确绑定到集合上。 然后是jQuery部分，用户可能希望有全选/反选的功能，或者根据某些条件自动勾选复选框。这时候需要用jQuery选择器来选中所有的checkbox，并绑定点击事件。例如，当用户点击全选按钮时，遍历所有的checkbox并将它们的checked属性设置为true。同时，可能需要处理表单提交，收集所有被选中的checkbox的值，可能是用户的ID，然后通过AJAX或者表单提交发送到后端。 还需要考虑前端和后端的数据交互格式。比如，选中的用户ID可能需要拼接成逗号分隔的字符串，或者作为数组传递。在后端，控制器动作方法需要接收这个集合，并进行相应的处理，比如删除选中的用户。 另外，参考用户提供的引用内容，他们提到了JavaScript如何获取选中的checkbox，设置选中状态，以及Spring MVC中的表单标签示例。虽然用户主要关注的是ASP.NET MVC和jQuery，但其他框架的思路可能类似，可以借鉴。比如，使用jQuery的.each()方法来遍历选中的checkbox，拼接它们的值。 需要确保生成的checkbox的name属性正确，以便模型绑定。例如，使用name="SelectedUserIds"来让ASP.NET MVC的模型绑定器识别为一个数组。同时，每个checkbox的value应该是对应用户的唯一标识符，比如ID。 在前端交互方面，可能需要一些用户体验的优化，比如当选中某个复选框时，更新选中的数量，或者高亮显示对应的行。这些可以通过jQuery的事件监听来实现。 最后，测试整个流程，确保前端正确发送选中的值，后端正确接收并处理。可能需要处理表单提交后的重定向或AJAX回调，以更新页面状态。 总结一下，步骤大致是：创建模型包含选中ID集合，在视图中生成复选框，使用jQuery处理全选和收集选中的值，后端控制器处理提交的数据。需要确保每一步的代码正确，并处理可能的异常情况，比如没有选中任何复选框时的提示。</think>### MVC与jQuery实现Checkbox多选功能教程 #### 一、MVC后端实现 1. **模型定义** 在模型中创建集合属性接收选中项： ```csharp public class UserSelectionModel { public List<int> SelectedUserIds { get; set; } // 存储被选中的用户ID public List<User> AvailableUsers { get; set; } // 所有可选用户列表 } ``` 2. **视图层生成Checkbox** 使用`@Html.CheckBoxFor`循环生成多选框： ```html @foreach (var user in Model.AvailableUsers) { <label> @Html.CheckBoxFor(m => m.SelectedUserIds, new { value = user.Id }) @user.Name </label> } ``` 3. **控制器接收数据** 通过`HttpPost`接收选中项集合： ```csharp [HttpPost] public ActionResult ProcessSelectedUsers(UserSelectionModel model) { var selectedIds = model.SelectedUserIds; // 获取选中的用户ID列表 // 执行批量操作... return View(); } ``` #### 二、jQuery前端交互 1. **全选/反选功能** 添加全选按钮并绑定事件： ```javascript $("#checkAll").click(function() { $('input[type="checkbox"]').prop('checked', $(this).prop('checked')); }); ``` 2. **获取选中值集合** 通过遍历获取选中项的ID字符串： ```javascript function getSelectedIds() { let userIdStr = ""; $("input[name='SelectedUserIds']:checked").each(function() { userIdStr += $(this).val() + ","; }); return userIdStr.slice(0, -1); // 移除末尾逗号 } ``` 3. **AJAX提交示例** 使用POST请求发送选中数据： ```javascript $("#submitBtn").click(function() { const ids = getSelectedIds(); $.post("/User/BatchDelete", { selectedIds: ids }, function(res) { alert(res.message); }); }); ``` #### 三、关键实现细节 1. **Checkbox命名规范** - 确保每个checkbox的`name`属性为`SelectedUserIds` - 设置`value`属性为唯一标识符（如用户ID） 2. **模型绑定要点** ASP.NET MVC要求集合参数名与前端控件名严格匹配才能自动绑定[^3] 3. **特殊场景处理** ```javascript // 部分选中时更新全选框状态 $('input[type="checkbox"]').not('#checkAll').change(function() { const allChecked = ($('input[type="checkbox"]').length === $('input[type="checkbox"]:checked').length); $('#checkAll').prop('checked', allChecked); }); ``` #### 四、完整示例流程图 ``` 用户界面 -> 勾选复选框 -> jQuery收集选中值 -> AJAX提交 -> MVC控制器处理 -> 返回操作结果 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值