jQuery操作单选框与复选框的实用技巧

"这篇内容主要介绍了如何使用jQuery来操作HTML中的单选框（radio）和复选框（checkbox），提供了一些实用的示例，有助于加快项目开发效率。" 在jQuery中，操作HTML表单元素如单选框和复选框是常见的需求。这段代码展示了如何在文档加载完成后对这些元素进行交互。 首先，`$(document).ready()`函数确保在DOM完全加载后执行内部的代码。接着，代码检查id为`coloroff`的单选框是否已被选中。如果已被选中，通过`attr("disabled", true)`禁用id为`blockon`的元素。`$("#coloroff").change()`监听`coloroff`单选框的变化，当其状态改变时，会禁用`blockon`并确保`blockoff`被选中。同样，`$("#coloron").change()`监听`coloron`单选框，当其被选中时，解除`blockon`的禁用状态。 接下来，文章提到了获取单选框和复选框值的方法。对于单选框，有多种方式可以获取选中的值： 1. 使用`$('input[name="testradio"]:checked').val();` 2. 使用`$('input:radio:checked').val();` 3. 使用`$('input[@name="testradio"][checked]');` 4. 使用`$('input[name="testradio"]').filter(':checked');` 这些方法都能获取到name为`testradio`的组中被选中的单选框的值。如果你想遍历所有name为`testradio`的单选框并获取它们的值，可以使用`each()`函数： ```javascript $('input[name="testradio"]').each(function(index) { console.log($(this).val()); }); ``` 对于复选框，获取被选中项的值可以使用以下代码： ```javascript $(".chooseFruit").click(function() { var arr = []; $("#fruit:checkbox[checked]").each(function(i) { arr[i] = $(this).val(); }); var vals = arr.join(","); console.log(vals); }); ``` 这里，当类名为`chooseFruit`的元素被点击时，它会收集id为`fruit`的所有被选中复选框的值，并将它们存储在一个数组中，然后用逗号分隔后输出到控制台。 总结来说，jQuery提供了强大的API来处理HTML表单元素，如单选框和复选框。通过选择器，我们可以轻松地找到和操作这些元素，实现页面动态交互。了解并熟练运用这些方法，能显著提升前端开发的效率和质量。