js如何通过文本内容点击提交按钮选中复选框

 时间:2024-10-12 17:57:27

1、首先,创建一个HTML文件,写上一些复选框内容,一个文本框,一个按钮的点击事件,相对应的js方法,具体代码可以参考我下面给的图片,没做样式控制,可能不算很美观。

js如何通过文本内容点击提交按钮选中复选框

2、运行效果详见我下面给的附图。从中可以看出,我写1的时候,点击提交1对应的复选框就勾中了,但是我写2的时候,照理应该只勾中2对应的复选框,可是1的还是勾中的。

js如何通过文本内容点击提交按钮选中复选框
js如何通过文本内容点击提交按钮选中复选框

3、因此,我对以上代码做了改进,修改了门钙蹲茌js方法的代码,先把所有选中的复选框全部设置为未选中,然后再根据文本框的内容去有选择的选中对应的复选框。附图如下,这里只显示了修改部分的js方法的内容

js如何通过文本内容点击提交按钮选中复选框

4、接下来,给大家看一下修改保存以后的页面的运行效果。选中2,对应勾选2对应的复选框选中3,对应勾选3对应的复选框。修改成功。

js如何通过文本内容点击提交按钮选中复选框
js如何通过文本内容点击提交按钮选中复选框

5、再想一想,这里面只能是输入单个序号,不能输入多个序号,这就失去了复选框的意义。因此,可以通过在文本框中用","分隔来处理。修改代码见附图

js如何通过文本内容点击提交按钮选中复选框

6、保存,双击html文件运行效果,我们可以看到如下效果。输入1,2,3,勾选对应的复选框输入1,3,选中对应的1,3复选框

js如何通过文本内容点击提交按钮选中复选框
js如何通过文本内容点击提交按钮选中复选框

7、运行效果完美,恭喜你,成功掌握了关于js如何通过文本内容点击提交按钮选中对应的复选框的方法!

  • 在MySqlWorkbench中创建和查看多列索引
  • eclipse怎么修改jdk版本
  • c#获取屏幕坐标,并将其转化成窗体或控件坐标
  • 小米笔记本怎么设置指纹解锁
  • Android界面之间传递数据之Intent数据传递
  • 热门搜索
    网络安全手抄报图片 英语手抄报内容5年级 5.1劳动节手抄报 中秋手抄报内容 爱国手抄报的内容 端午节手抄报怎么画 手抄报图片素材 关于国庆节手抄报 关于友善的手抄报 教师节手抄报内容文字