由于Jquery的版本更新很快，代码的写法也改变了许多，以下Jquery代码适query1.4版本以上Radio 1.获取选中值，三种方法都可以： $(‘input:radio:checked’).val()； $(“input[type=’radio’]:checked”).val(); $(“input[name=’rd’]:checked”).val(); 2.设置第一个Radio为选中值： $(‘input:radio:first’).attr(‘checked’, ‘checked’); 或者 $(‘input:radio:first’).attr(‘checked’, ‘true’
在jQuery中，处理HTML表单元素如CheckBox、RadioButton和DropDownList是常见的操作。这些元素在网页交互中扮演着重要角色，允许用户输入数据或做出选择。以下是对标题和描述中涉及的知识点的详细说明：
**RadioButton**
对于RadioButton，主要涉及获取选中值和设置选中值的操作：
1. **获取选中值**：
- 使用`$(‘input:radio:checked’).val()`可以获取当前选中RadioButton的值。
- 也可以通过`$(“input[type=’radio’]:checked”).val()`或`$(“input[name=’rd’]:checked”).val()`来达到相同的效果，其中`name='rd'`是RadioButton组的共享名称。
2. **设置选中值**：
- 若要设置第一个RadioButton为选中状态，可以使用`$(‘input:radio:first’).attr(‘checked’, ‘checked’)`, 或者 `$(‘input:radio:first’).attr(‘checked’, ‘true’)`. 这两个写法等价，因为`attr('checked', 'checked')`等同于`attr('checked', 'true')`，也等于`attr('checked', true)`。
3. **其他设置选中值的方法**：
- 要设置最后一个RadioButton为选中，使用`$(‘input:radio:last’).attr(‘checked’, ‘checked’)`.
- 根据索引值设置任意一个RadioButton，使用`$(‘input:radio’).eq(索引值).attr(‘checked’, ‘true’)`.
- 也可以通过Value值来设置，例如`$(“input:radio[value=’rd2′]”).attr(‘checked’,’true’)`.
- 删除某个RadioButton，使用`$(“input:radio[value=’rd2′]”).remove()`，或者根据索引删除，如`$(“input:radio”).eq(索引值).remove()`。
**CheckBox**
CheckBox的处理与RadioButton类似，但CheckBox通常允许多选，因此可能需要额外处理多个选中项：
1. **获取选中值**：
- 获取所有选中CheckBox的值，可以使用循环遍历`$('input[type="checkbox"]:checked')`。
2. **设置选中值**：
- 设置CheckBox的选中状态通常涉及遍历并设置`attr('checked', 'checked')`。
**DropDownList**
对于下拉列表（DropDownList），操作主要包括获取和设置选中项、获取列表长度等：
1. **获取选中项的值**：
- 使用`$(‘select#sel option:selected’).val()`或`$(‘select#sel’).find(‘option:selected’).val()`可以获取选中项的Value值。
- 而`$(‘select#sel option:selected’).text()`或`$(‘select#sel’).find(‘option:selected’).text()`则用于获取选中项的文本内容。
2. **获取选中项索引**：
- 通过`$(‘select#sel’).get(0).selectedIndex`可以得到当前选中项的索引值。
3. **获取最大索引**：
- 使用`$(‘select#sel option:last’).attr(“index”)`获取选项列表的最大索引。
4. **获取列表长度**：
- `$(‘select#sel’)[0].options.length` 或 `$(‘select#sel’).get(0).options.length`可得到下拉列表的选项数量。
5. **设置选中值**：
- 要设置第一个选项为选中，可以使用`$(‘select#sel option:first’).attr(‘selected’,’true’)`, 或者直接设置`selectedIndex`，如`$(‘select#sel’)[0].selectedIndex = 0;`.
- 设置最后一个选项为选中，使用`$(‘select#sel option:last’).attr(‘selected’,’true’)`.
6. **设置任意选项为选中**：
- 通过设置`selectedIndex`属性，如`$(‘select#sel’)[0].selectedIndex = 索引值;`.
7. **根据Value设置选中值**：
- `$(‘select#sel’).attr(‘value’,’4′)`或`$(“select#sel option[value=’4′]”).attr(‘selected’, ‘true’)`, 可以设置Value为4的选项为选中。
8. **删除选项**：
- 要删除特定Value的选项，使用`$(“select#sel option[value=’3′]”).remove()`。
- 删除指定索引的选项，使用`$(” select#sel option “).eq(索引值).remove()`。
在实际应用中，这些操作常结合使用，以实现用户交互和数据处理。了解并熟练运用这些jQuery方法，可以大大提高前端开发的效率。
