jQuery常用操作指南:字符串去空格、元素显隐与Radio/Checkbox处理

作者:流萤

时间:2026-10-27

浏览:453

本文汇总jQuery常见操作,包括使用$.trim去除字符串首尾空格,通过css、hide、show控制元素显隐,以及遍历Checkbox获取选中值。重点讲解Radio按钮组的选中值读取、指定项选中(nth选择器与DOM属性赋值)及重置方法,提供完整代码示例。

文章目录

字符串去空格与元素显隐控制

移除字符串首尾空白字符。


jQuery 脚本示例:


代码片段如下:

 
$.trim(" hello, how are you? ");

Checkbox值读取与DOM赋值取值

jQuery 遍历复选框值


复制代码 示例如下:


代码实现如下:

 
$("input[type=checkbox][checked]").each(function(){ //因复选框通常多选,需遍历输出
alert($(this).val());
}); 

$("#A").val("1") 表示 id 为 A 的元素值为 1,jQuery 赋值通过参数传递,与原生 JS 不同,


如 $("#A").html("1") 与 $("#A").text("1") 均为赋值操作,$("#A").html() 与 $("#A").text() 用于取值,


获取文本内容


方案一:


代码示例:

 
$('#id').css('display','none');
$('#id').css('display','block');

方案二:


代码示例:

 
$('#id').hide();
$('#id').show();

Radio按钮组操作详解

单选按钮组,属性 name="sex"。


代码示例:

 
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>

1. 获取选中单选按钮的 value 值。


代码示例:

 
$('input:radio[name=sex]:checked').val();

2. 选中单选按钮 (Male)。


代码示例:

 
$('input:radio[name=sex]:nth(0)').attr('checked',true);

或


代码示例:

 
$('input:radio[name=sex]')[0].checked = true;

3. 选中单选按钮 (Female)。


代码示例:

 
$('input:radio[name=sex]:nth(1)').attr('checked',true);
或
$('input:radio[name=sex]')[1].checked = true;

4. 选中单选按钮 (Unknown)。


代码示例:

 
$('input:radio[name=sex]:nth(2)').attr('checked',true);
或
$('input:radio[name=sex]')[2].checked = true;

5. 重置单选按钮状态。


代码示例:

 
$('input:radio[name=sex]').attr('checked',false);

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章