千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > JS多选框选中与取消解析

JS多选框选中与取消解析

来源:千锋教育
发布人:xqq
时间: 2023-11-22 08:27:09 1700612829

一、js多选框选中与取消

在网页开发中,常用的表单控件之一是多选框。一般情况下,我们使用鼠标点击多选框来进行选中和取消选中操作。但是,在某些情境下,我们需要通过js代码来进行多选框的选中和取消。下面是示例代码:


  
  
  

  

以上代码中,我们使用了getElementById方法获取了三个多选框的引用,然后在js代码中对其进行了选中和取消选中操作。checkbox.checked属性代表该多选框是否被选中,true代表选中,false代表未选中。

二、js多选框默认选中事件

在实际开发中,我们可能需要对多选框进行默认选中操作。在html中,我们可以通过在多选框的input标签中添加checked属性来进行默认选中。下面是示例代码:


  
  
  

  

上面代码中,我们在checkbox1和checkbox3多选框的input标签中添加了checked属性,表示这两个多选框默认选中。通过js代码获取到多选框引用后,对其进行选中和取消选中操作,与前面示例代码中一致。

三、js获取多选框选中的值

在表单提交时,我们可能需要获取多选框选中的值,这个时候我们需要用到js。下面是示例代码:


   
  
   
  
   
  

  

  

上面代码中,我们通过getElementsByTagName方法获取了name属性为"fruit"的多选框,并使用for循环来遍历每个多选框,如果该多选框被选中,则将其value值加入到result数组中。最后使用alert函数输出选中结果。

四、js控制复选框取消选中

我们可能需要在某些情况下,控制某个多选框不被选中。下面是示例代码:


  
  
  

  

  

上面代码中,我们使用getElementById方法获取了checkbox2的引用,并在js代码中对其进行了取消选中的操作。

五、js单选框取消选中

与多选框不同,单选框一次只能选中一个选项,在选中一个选项之后,其他选项应该自动取消选中。下面是示例代码:


  
  
  
  

  

上面代码中,我们使用getElementsByName方法获取了name属性为"gender"的两个单选框,然后使用for循环遍历每个单选框。在遍历的过程中,我们给每个单选框绑定了一个onclick事件,当该单选框被点击时,使用for循环遍历除该单选框之外的其他单选框,并将其取消选中。

六、js获取多选框是否选中

在某些情况下,我们需要通过js代码来获取多选框的选中状态,判断其是否被选中。下面是示例代码:


  
  
  

  

  

上面代码中,我们使用getElementById方法获取了三个多选框的引用,并在js代码中通过checkbox.checked属性来获取多选框的状态。

七、js设置多选框不选中

有时候,我们需要通过js代码来将多选框恢复到未选中状态。下面是示例代码:


  
  
  

  

  

上面代码中,我们使用getElementsByName方法获取了name属性为"checkbox"的所有多选框,并使用for循环遍历每个多选框,将其设置为未选中状态。

八、js取消checkbox选中

除了多选框和单选框,我们还有一种常用的表单控件是checkbox,它也需要经常进行选中和取消选中的操作。下面是示例代码:


  

  

  

上面代码中,我们使用getElementById方法获取了checkbox的引用,并在js代码中将其设置为未选中状态。

九、js取消radio选中

和多选框一样,我们也需要对单选框进行取消选中操作。下面是示例代码:


  
  
  
  

  

  

上面代码中,我们使用getElementsByName方法获取了name属性为"radio"的所有单选框,并使用for循环遍历每个单选框,将其设置为未选中状态。

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT