js实现点击选中,第二次点击取消选中状态
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现点击选中,第二次点击取消选中状态相关的知识，希望对你有一定的参考价值。
是以表格形式呈现的，每一个字都可以点击了。但是不知道怎么实现再次点击取消选中状态
so eazy
我只能告诉你思路~因为我懒的给你打代码
首先获取到对象~你JS的画用dom
然后实现第一步，点击选择 通过onclick 事件触发~然后改变得到dom对象的背景颜色style
第二次点击 也是同一个function，这里要处理一下需要做判断~如果dom里的style的背景颜色是有值的，那么就清空，如果不是则加上背景颜色
我选中后是这样显示的，怎么清空这个选中状态?
$("#0_"+head).css("border","0");
参考技术A 我是先给选中的添加一个其他颜色，比如 在dom的点击事件里先添加一句 tr.className="";随后添加一句tr.className="color";，color是你在css文件中给tr添加的选中颜色，当第二次点击之前的选中样式就会清空 参考技术B <html>
<head>
</head>
<body>
<div id="aa">ss</div>
</body>
<script>
var $aa = document.getElementById('aa'),
color = 'red',
otherColor = 'black';
$aa.onclick = function()
this.style.color = color;
swapColor();
function swapColor()
var temp = color;
color = otherColor;
otherColor = temp;
</script>
</html>
这是一个点击切换文字颜色的小demo，借你参考
参考技术C 加个class 呗 有就清空 ，没得就加上第二次点击后反应复选框被（取消）选中
【中文标题】第二次点击后反应复选框被（取消）选中【英文标题】：React checkbox get (un)checked after the second click 【发布时间】：2019-11-23 10:46:39 【问题描述】：下面是列出动态复选框的反应组件部分：
<div className="pb-4">
<p>Choose the task owner(s):</p>
peerIds.map(id =>
if (currentUserId != id)
return (
<label className="checkbox-inline mr-3">
<input onChange=onChange_TaskOwner
type="checkbox"
name="taskowner"
checked=st_taskOwnersId.filter(function (item) return (item == id)).length > 0
value=peers[id].id />
<span>peers[id].fullName</span>
</label>
)
)
<div style= clear: 'both' ></div>
</div>
在上面的代码中，如果当前 id 已经处于名为 st_taskOwnersId 的钩子状态对象中，我将 checked 设置为 false/true。
我使用hook 存储检查项目的ID，如下所示。 onChange_TaskOwner 函数根据是checked 还是unchecked 来更新st_taskOwnersId：
const [st_taskOwnersId, set_taskOwnersId] = useState([] as any);
const onChange_TaskOwner = (event) =>
event.preventDefault();
if (event.target.checked)
set_taskOwnersId([...st_taskOwnersId, event.target.value]);
else
set_taskOwnersId(st_taskOwnersId.filter(function (item)
return (item != event.target.value);
));
代码运行没有错误。唯一的问题是我必须单击两次才能选中/取消选中复选框。我不知道为什么会这样。有什么帮助吗？
【问题讨论】：
我看到的一个问题是您没有在重复元素上设置key。还应该使用some() 而不是filter().length。在迭代次数和内存方面效率更高
尝试使用camelCase、!==、===，无需声明function，使用短语法。也许放一些沙箱，因为错误可能来自另一个地方......
@charlietfl 感谢您的帮助。我根据两个cmets做了更改，但问题没有解决。不过，我必须点击两次。你看到关于使用hook 的任何问题？
您确认onChange_TaskOwner() 每次都被解雇了吗？如果没有沙盒中可重现的示例，很难提供更多帮助
【参考方案1】：
我相信问题出在onChange_TaskOwner 函数上。您应该删除event.preventDefault(); 调用。
我试图在这个codepen 上重现你的组件，没有event.preventDefault(); 工作正常，如果你添加它，同样的错误开始发生。
【讨论】：
谢谢！虽然不确定why 它的行为与preventDefault 一样。
只需在 codepen 的 onChange 函数中添加 preventDefault ，您就会发现原因。至少，其中之一，不确定。
抱歉，why 在我的评论中缺失 :) 再次感谢！以上是关于js实现点击选中,第二次点击取消选中状态的主要内容，如果未能解决你的问题，请参考以下文章
jQuery实现radio第一次点击选中第二次点击取消功能(转)