input type button checkbox onclick 点击失效 无反应

本文探讨了一段看似正常的JavaScript代码出现奇怪行为的原因,即点击全选复选框时无响应。通过分析发现,问题根源在于使用了JavaScript的保留关键字作为函数名,导致代码失效。文章最后给出了修改函数名后的解决方案。

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

全选

//全选/反选
function checked(){
	alert("x");
}
<input type="checkbox" checked="checked" id="allChecked" onclick="checked()"/>全选


上面这段代码,你觉得逻辑肯定行得通,觉得也会alert出一个x字符串符号出来,但是事实往往不是我们认为的这样

上面的结果是,点击复选框后,完全无效


具体的原因是


js定义了一系列保留关键字,也类似java或者其他编程语言一样,拥有自己的属性,自己的语法

js保留了自己独有关键字,如select,alert,start等,还不竟如此,

还包括一些标签的属性关键字也是不允许重写使用的,一些常用的关键字标识符如下






遇到上边的问题,改下函数function 的名字即可。该问题即可解决!~·~


<div class="main-frame top-operation-box-div"> <div class="bottom-operation-box"> <div class="div-frame-high-w"> <div class="btn-opt-box btn-opt-play btn-opt-bg-div-blue" id="opt-play"> <div class="btm-opt-icon-bg2"><span class="fa fa-play btn-opt-icon-size"></span></div> </div> <div class="div-frame-high"><span class="btn-opt-text-txt">播放</span></div> </div> <div class="div-frame-high-w"> <div class="top-opt-button element-show btn-opt-bg-div-Yellow" id="top-opt-SPC"> <div class="top-button-icon-bg2"><span class="fa fa-clock-o btn-opt-icon-size"></span></div> </div> <div class="div-frame-high"><span class="top-button-text">程控</span></div> </div> <div class="div-frame-high-w"> <div class="btn-opt-box btn-opt-stop btn-opt-bg-div-orange" id="opt-stop"> <div class="btm-opt-icon-bg2"><span class="fa fa-stop btn-opt-icon-size"></span></div> </div> <div class="div-frame-high"><span class="btn-opt-text-txt">停止</span></div> </div> <div class="div-frame-high-w"> <div class="top-opt-button element-show btn-opt-bg-div-brown" id="top-opt-listen"> <div class="top-button-icon-bg2"><span class="fa fa-headphones btn-opt-icon-size"></span></div> </div> <div class="div-frame-high"><span class="top-button-text">监听</span></div> </div> <div class="div-frame-high-w"> <div class="top-opt-button element-show btn-opt-bg-div-brown" id="top-opt-task-next"> <div class="top-button-icon-bg2"><span class="fa fa-step-forward btn-opt-icon-size"></span></div> </div> <div class="div-frame-high"><span class="top-button-text">下一曲</span></div> </div> <div class="div-frame-high-w"> <div class="btn-opt-box btn-opt-alert element-hidden" id="opt-alert"> <span class="icon-ion mdi mdi-alarm-light-outline btn-opt-icon"></span> </div> <div class="div-frame-high"><span class="top-button-text">一键报警</span></div> </div> </div> <div class="zone-box-opt"> <div class="div-frame-high-q"> <div class="div-frame-high-w"> <div class="zone-box-item"> <button type="button" class="layui-btn layui-btn" onclick="selectAll()">全选</button> </div> </div> <div class="div-frame-high-w"> <div class="zone-box-item"> <span class="zone-box-value zone-select-value">0/0</span> </div> <div class="div-frame-high"><span class="zone-box-text-qw">已选</span></div> </div> <div class="div-frame-high-w"> <div class="zone-box-item"> <span class="zone-box-value groups-value">0</span> </div> <div class="div-frame-high"><span class="zone-box-text">分组数量</span></div> </div> <div class="div-frame-high-w"> <div class="zone-box-item"> <span class="zone-box-value zone-online-value">0/0</span> </div> <div class="div-frame-high"><span class="zone-box-text">设备数量</span></div> </div> </div> <div class="div-frame-high-q"> <div class="zone-box-item zone-box-search"> <i class="layui-icon layui-icon-search"></i> <input type="input" class="layui-input zone-search-input" placeholder="检索" keyup=""> </div> <div class="div-frame-high-w"> <div class="zone-box-item"> <div class="div-frame-high"><span class="zone-box-text">分组控制</span></div> <div class="switch-box"><input id="show-group" type="checkbox" class="switch" /><label for="show-group"></label> </div> </div> </div> <div class="div-frame-high-w"> <div class="zone-box-item"> <div class="div-frame-high"><span class="zone-box-text">在线设备</span></div> <div class="switch-box"><input id="show-online" type="checkbox" class="switch" /><label for="show-online"></label></div> </div> </div> <div class="div-frame-high-w"> <div class="zone-box-item zone-box-volume"> <span class="zone-box-text fa fa-volume-up"></span> <div id="slider-volume-box"></div><span class="slider-volume-value">50%</span> </div> </div> </div> </div> </div>我这个代码在缩小浏览器和控制台和其他浏览器会固定不住?
07-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值