JQuery一种取同级值的方式(比如你在GridView中)

在使用jQuery处理Web页面元素时，我们经常会遇到需要在同级元素之间获取或设置值的情况。本文将介绍如何在特定场景下，如在GridView中，使用jQuery取同级值。 ### jQuery同级元素值获取方法 1. **使用.next()方法获取下一个兄弟元素的值** 在jQuery中，`.next()`方法可以用来选取匹配元素集合中每个元素紧邻的同级元素。例如，当页面上有一个checkbox被选中时，我们可能需要获取紧接着该checkbox后面隐藏字段的值。 ```javascript customerCode=$("input:checked").next().attr("value"); ``` 上述代码中，`$("input:checked")`找到所有选中的checkbox，`.next()`取得紧接着checkbox的下一个兄弟元素（即隐藏字段），`.attr("value")`获取该元素的值。 2. **使用.next().next()方法获取更后一个同级元素的值** 如果你需要获取选中checkbox之后的第二个同级元素的值，可以连续调用两次.next()方法。 ```javascript //customerName=$("input:checked~#hdCustomerName").val(); type=$("input:checked~.hdStatus").attr("value"); ``` 在此例中，注释部分的代码由于IE浏览器对于ID选择器的限制而不能使用，因此改用class选择器`.hdStatus`结合`.attr("value")`获取值。 ### jQuery全选/取消全选实现 另一个常见的场景是全选/取消全选checkbox的功能。 ```html <input type="checkbox" name="chk_list" id="chk_list_1" value="1"/>1<br/> <input type="checkbox" name="chk_list" id="chk_list_2" value="2"/>2<br/> <input type="checkbox" name="chk_list" id="chk_list_3" value="3"/>3<br/> <input type="checkbox" name="chk_list" id="chk_list_4" value="4"/>4<br/> <input type="checkbox" name="chk_all" id="chk_all"/>全选/取消全选 <script type="text/javascript"> $("#chk_all").click(function(){ $("input[name='chk_list']").attr("checked",$(this).attr("checked")); }); </script> ``` 以上代码中，当点击全选checkbox（#chk_all）时，会触发点击事件处理函数。在该函数内部，使用jQuery的`.attr()`方法将`"checked"`属性设置为与`#chk_all`的当前选中状态相同，从而实现全选或取消全选的功能。 ### jQuery.attr()方法的使用 `.attr()`方法是jQuery中用于获取和设置元素属性值的方法。 ```javascript $("input").attr("value"); ``` 这行代码获取页面上所有`<input>`元素的`value`属性值。而`.attr("checked")`可以用来判断checkbox是否被选中。在实现全选功能时，`.attr()`方法被用来设置`checked`属性： ```javascript $("input[name='chk_list']").attr("checked",$(this).attr("checked")); ``` 这段代码将所有`name`为`chk_list`的checkbox的`checked`属性设置为与`#chk_all`复选框的`checked`状态一致。 通过上述知识，我们可以看到如何利用jQuery来处理同级元素之间的交互以及如何使用jQuery的属性选择器和方法来实现Web页面的动态交互功能。在实际应用中，这可以帮助开发者更高效地操作DOM，提升用户体验。