怎么用js代码改变单选框的选中状态

本文介绍了如何使用JavaScript来改变HTML中单选按钮的状态,并通过一个具体示例详细说明了正确的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天突然有一个需求要用到,使用js代码改变单选框的选中状态。当时想也不想直接

function doGender(gender) {
  if (gender == "男") {
    gel("radionan").style.checked = "checked";
  } else {
    gel("radionv").style.checked = "checked";
  }
}

function gel(id) {
  return document.getElementById(id);
}

一执行,没反应......

因为我们在radio标签中设置选中是checked="checked";所以下意识给gel("radionv").style.checked赋值为"checked",然后上网一查

原来在js代码中要选中该单选框要给checked赋值为true。

继续改为:

function doGender(gender) {
  if (gender == "男") {
    gel("radionan").style.checked = true;
  } else {
    gel("radionv").style.checked = true;
  }
}

一执行,还是没反应,有点蒙了...哪里出错呢????

难道不是style属性么????

直接gel("radionan")点一下,可以看到checked属性。

那就没错了!!!!!

function doGender(gender) {
  if (gender == "男") {
    gel("radionan").checked = true;
  } else {
    gel("radionv").checked = true;
  }
}

 

一执行,果然如此。。。。。。。。。。。。。。

 

一切到此结束!!!!!!!!!!!!

 

 

转载于:https://www.cnblogs.com/rampb/p/3479251.html

### JavaScript 中操作单选框选择状态的方法 在 JavaScript 中可以通过多种方式来设置或获取单选按钮 (`<input type="radio">`) 的 `checked` 属性。下面介绍几种常见的方法。 #### 使用原生 JavaScript 设置单选按钮的状态 通过文档对象模型 (DOM) API 可以直接访问并修改 HTML 元素属性: ```javascript // 获取指定名称的所有单选按钮节点列表 let radios = document.getElementsByName('myRadioGroup'); // 遍历这些节点并将特定索引位置的单选按钮设为已选中 radios[0].checked = true; ``` 此代码片段展示了如何利用 `getElementsByName()` 方法获得一组同名的 `<input>` 控件集合,之后可以遍历该集合并对其中任意一项设定其 `checked` 属性为 `true` 来实现选中的效果[^1]。 #### 利用 jQuery 库简化 DOM 操作 对于熟悉 jQuery 的开发者来说,库提供了更简洁的方式来进行相同的操作: ```javascript // 选取名为 'sub' 的单选按钮组内被选中的项,并读取关联描述单元格的内容 var val1 = $("td input[name='sub']:checked").closest("tr").find('.desc').html(); ``` 这里使用了链式调用来定位表格内的目标元素,先找到匹配的选择器对应的行(`tr`),再从中提取所需的 `.desc` 类下的 HTML 内容[^2]。 另外一种常见场景是动态改变页面上某个具体 ID 或类别的单选按钮的状态: ```javascript $('#specificRadioButtonId').prop('checked', true); ``` 这段 jQuery 语句会把具有给定 ID 的单选按钮标记为已选中;如果希望取消勾选,则只需将第二个参数改为 `false` 即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值