Jquery和angularjs获取check框选中的值的方法汇总

本文旨在通过具体实例展示如何使用jQuery和AngularJS获取复选框（checkbox）选中的值，这些技巧简单实用，有需要的小伙伴不妨参考一下。

在日常开发中，我们经常需要获取用户通过复选框选中的值，以及这些复选框所在行的所有信息。一种有效的方法是将需要获取的信息都放在复选框的值中。这样，当我们获取复选框选中值时，也就相当于获取了当前行的信息。

以下是HTML代码示例：

对于全选与反选的操作，我们可以使用jQuery来判断全选复选框是否被选中，并据此设置其他复选框的状态。代码如下：

var bischecked = $('cboxchecked').is(':checked');

var fruit = $('input[name="orders"]');

fruit.prop('checked', bischecked);

在处理HTML元素的属性时，我们需要明确何时使用prop方法，何时使用attr方法。对于HTML元素本身就具有的属性，如复选框的checked状态，我们应该使用prop方法来处理。而对于我们自定义的DOM属性，则应该使用attr方法。

以上实例展示了如何使用jQuery和AngularJS获取复选框选中的值，并介绍了在处理HTML元素属性时，应如何选择使用prop方法和attr方法。这些技巧对于开发者来说非常实用，能够帮助他们更轻松地获取用户通过复选框选择的信息。获取选中的值：

使用jQuery，我们可以遍历所有被选中的复选框并获取它们的值。以下是相关的实现代码片段。而如果我们采用AngularJS，则可以不必操作DOM，只需关注数据状态。

jQuery实现：

在HTML中，我们有一系列的复选框，它们的`name`属性值为"orders"。我们可以使用jQuery的`$('input[name="orders"]:checked')`选择器选中所有被选中的复选框，并使用`.each()`函数遍历它们。在每次迭代中，我们可以获取当前复选框的值，并根据需要进行处理。

AngularJS实现：

在AngularJS中，我们不需要直接操作DOM。只需关注数据状态即可。以下是相关的HTML代码片段和一个简单的AngularJS控制器。

HTML部分：

我们有一个AngularJS应用，其中包含一个标签选择区域。使用`ng-repeat`指令显示所有的标签和类别。每个标签前都有一个复选框，它的状态由`isSelected()`函数判断并可通过`updateSelection()`函数进行更新。在页面上，我们还实时显示已选标签和选中的值。

AngularJS部分（在script2.js中）：

我们定义了一个AngularJS应用并指定了一个名为"AddStyleCtrl"的控制器。在此控制器中，我们定义了一些变量和方法来处理复选框的选中状态。例如，当复选框被点击时，我们会调用`updateSelection()`方法来更新选中状态。我们还定义了一个方法来判断一个标签是否已被选中。在页面上，我们使用双括号语法`{{}}`来绑定数据和显示数据。

关于``标签中的`ng-checked`和`ng-click`指令：

`ng-checked`指令用于设置复选框的初始状态，其值由`isSelected()`函数返回的结果决定。当复选框被点击时，会触发`ng-click`指令绑定的函数`updateSelection($event, tag.id)`。注意，在AngularJS中，如果你想在`ng-click`触发的函数中获取到触发该函数的元素，不能直接传入`this`，而应该传入事件对象`$event`。这样你就可以通过事件对象获取到触发事件的元素的相关信息。在AngularJS的世界里，这里的“this”有着特殊的含义，它代表着我们所熟知的作用域（scope）。我们可以将事件（event）传入，然后在函数内部通过event.target来获取到具体的元素。

在代码的line29-30部分，这些注释就像是开发过程中的灯塔，为测试阶段的我们照亮了前行的道路。它们让我们能够清晰地看到selected数组和selectedTags数组中的实时内容。

接下来，让我们深入了解一下AngularJS的代码（script2.js）。

这是一个名为“App”的AngularJS模块，由zh在20/05/15创建。在这个模块中，定义了一个名为“AddStyleCtrl”的控制器。这个控制器中包含了多个与样式相关的标签分类（tagcategories），每个分类下又有多个标签（tags）。还有两个数组：selected和selectedTags，用于存储被选中的分类和标签。

这个控制器内有一个名为updateSelected的函数，它根据传入的action参数（添加或移除）以及对应的id和name，来更新selected和selectedTags数组。还有一个updateSelection函数，它通过监听复选框的点击事件，来调用updateSelected函数进行相应的操作。还有一个isSelected函数，用于判断某个分类是否被选中。

在这段代码的结尾处，我们看到了一个名为“cambrian.render('body')”的调用。这可能是用于渲染页面元素或组件的指令。由于缺少上下文信息，我们无法确定它的具体作用。

这是一个典型的AngularJS控制器代码，包含了数据模型、状态管理和视图交互的逻辑。在AngularJS的世界里，这种代码结构是非常常见的。