JS中全选加法的两个问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS中全选加法的两个问题相关的知识，希望对你有一定的参考价值。
代码以下：
<style>
li list-style:none; width:100px;
</style>
<script>
window.onload=function()
var oBtn=document.getElementById('choice').getElementsByTagName('input')[0];
var oDiv=document.getElementById('price');
var oMoney=document.getElementById('money');
var aBtn=oDiv.getElementsByTagName('input');
var aP=oDiv.getElementsByTagName('p');
var getMoney = 0;
var i=0;
oBtn.onclick=function()
for (i = 0; i < aBtn.length; i++)
if (aBtn[i].type == 'checkbox') //type是类型的意思
aBtn[i].checked = oBtn.checked;
if(oBtn.checked)
oMoney.innerhtml=parseInt(aP[0].innerHTML)+parseInt(aP[1].innerHTML)+parseInt(aP[2].innerHTML)
else
oMoney.innerHTML=''
for(i=0;i<aBtn.length;i++)
aBtn[i].onclick=function()
if(this.checked)
getMoney+=this.value*1;
oMoney.innerHTML=getMoney;
else
getMoney-=this.value*1;
oMoney.innerHTML=getMoney;
</script>
<body>
<div id="choice">
<label><input type="checkbox" /><span>全选</span></label>
</div>
<div id="price">
<ul >
<li><input type="checkbox" name="buy" value="123" /></li>
<li><p>123</p></li>
</ul>
<ul >
<li><input type="checkbox" name="buy" value="456" /></li>
<li><p>456</p></li>
</ul>
<ul >
<li><input type="checkbox" name="buy" value="789"/></li>
<li><p>789</p></li>
</ul>
</div>
<label>总价：<span id="money">0</span> 元</label>
</body>
问题如下：
第一个，点击全选按钮，价格相加，但是当取消其中一个商品的时候，那个价格变化就很奇怪了，我要改动的是，当我取消其中一个商品的时候，总价就减去那个被取消的商品的价格，怎么改呢？
第二个，分别点击非全选按钮，然后点击全选按钮，再点击全选按钮把全选去掉，再去点击非全选按钮，商品的总价就开始出问题了。怎么解决？
尽量不要改动HTML里面的内容，用JS。
你好，我帮你稍微调整了一下JS代码，实现方式，在性能可能不是最好的，但思路比较简单，就是无论单击哪个价格，都遍历所有的价格checkbox，将被选中的价格想加来计算总价。
具体代码如下：
window.onload=function()var oBtn = document.getElementById('choice').getElementsByTagName('input')[0];
var oDiv = document.getElementById('price');
var oMoney = document.getElementById('money');
var aBtn = oDiv.getElementsByTagName('input');
var aP = oDiv.getElementsByTagName('p');
var getMoney = 0;
var i=0;
oBtn.onclick=function()
for (i = 0; i < aBtn.length; i++)
if (aBtn[i].type == 'checkbox') //type是类型的意思
aBtn[i].checked = oBtn.checked;
if (oBtn.checked)
oMoney.innerHTML = parseInt(aP[0].innerHTML) + parseInt(aP[1].innerHTML) + parseInt(aP[2].innerHTML);
else
oMoney.innerHTML = '';
for (i = 0; i < aBtn.length; i++)
(function(i)
aBtn[i].onclick = function()
getMoney = 0;
for (var j = 0, len = aBtn.length; j < len; j++)
if (aBtn[j].checked)
getMoney += aBtn[j].value * 1;
oMoney.innerHTML = getMoney;
)(i);
希望是你想要的结果，如有疑问，可以追问，望采纳~
这个问题，我自己已经解决了，我问你一个新问题：其中一个单选按钮，勾取消，全选按钮的勾也取消，怎么实现呢？
追答这个也不难，给你列举两种实现方式：
1、checkbox点击事件触发时，判断当前被点击项的checked属性是否为false，如果是，直接取消全选按钮。因为只有有一个没被选中就该取消全选了。
2、checkbox被点击时，遍历所有的checkbox，发现有checked为false的元素则break，同时取消全选。
var oBtn=document.getElementById('choice').getElementsByTagName('input')[0];
var oDiv=document.getElementById('price');
var oMoney=document.getElementById('money');
var aBtn=oDiv.getElementsByTagName('input');
var aP=oDiv.getElementsByTagName('p');
var getMoney = 0;
var i=0;
oBtn.onclick=function()
if(this.checked)
for (i = 0; i < aBtn.length; i++)
if (aBtn[i].type == 'checkbox') //type是类型的意思
aBtn[i].checked = oBtn.checked;
getMoney += parseInt(aBtn[i].value);
oMoney.innerHTML = getMoney;
getMoney = 0;
else
for(i=0;i<aBtn.length;i++)
aBtn[i].checked = false;
oMoney.innerHTML = 0;
for(i=0;i<aBtn.length;i++)
aBtn[i].onclick=function()
var val = 0;
if(!this.checked)
oBtn.checked = false;
val -= parseInt(this.value);
else
var sta = true;
for(i=0;i<aBtn.length;i++)
sta *= aBtn[i].checked;
oBtn.checked = sta;
val += parseInt(this.value);
oMoney.innerHTML = parseInt(oMoney.innerHTML) + val;
追问
谢啦，正是我想要的，哈哈！
本回答被提问者采纳在 Windows 中全选和复制的最有效方法
【中文标题】在 Windows 中全选和复制的最有效方法【英文标题】：Most efficient way to select all and copy in Windows 【发布时间】：2019-09-13 21:22:09 【问题描述】：我有一个从第三方程序中抓取数据的脚本。目前我正在使用模拟键盘敲击来选择和复制数据：
import win32com.client
shell = win32com.client.Dispatch("WScript.Shell")
shell.SendKeys('^a')
shell.SendKeys('^c')
脚本运行良好，但由于某种原因，它使我的系统和第三方应用程序非常滞后。现在我正在寻找更有效的方法来在 Windows 中全选和复制。
【问题讨论】：
你到底想收集什么？文件？文本？图片？其他人？ 我正在尝试收集大量文本。 你在抓取什么程序？ 【参考方案1】：TL;DR
我能想到的另一种方法是使用Inspect。
例如，我在 Chrome 窗口中打开了这个问题，这就是 Inspect 中的结果
从前面和后面的内容中，我们可以看到由于蓝色，我正在查看与该浏览器窗口相关的数据。
选择后，同时按 CTRL + Shift + 4，或转到“编辑”>“全部复制”。这给出了上图右侧出现的所有信息，即
How found: Selected from tree...
Name: "python - Most efficient way to select all and copy in Windows - Stack Overflow - Google Chrome"
ControlType: UIA_PaneControlTypeId (0xC371)
LocalizedControlType: "pane"
BoundingRectangle: l:1358 t:-8 r:3294 b:1048
IsEnabled: true
IsOffscreen: false
IsKeyboardFocusable: false
HasKeyboardFocus: false
AccessKey: ""
ProcessId: 8396
RuntimeId: [2A.3508A4]
FrameworkId: "Win32"
ClassName: "Chrome_WidgetWin_1"
NativeWindowHandle: 0x3508A4
IsControlElement: true
ProviderDescription: "[pid:12412,providerId:0x3508A4 Main:Nested [pid:8396,providerId:0x3508A4 Annotation(parent link):Microsoft: Annotation Proxy (unmanaged:uiautomationcore.dll); Main:Microsoft: MSAA Proxy (IAccessible2) (unmanaged:uiautomationcore.dll)]; Nonclient:Microsoft: Non-Client Proxy (unmanaged:uiautomationcore.dll); Hwnd(parent link):Microsoft: HWND Proxy (unmanaged:uiautomationcore.dll)]"
IsPassword: false
IsRequiredForForm: false
IsDataValidForForm: true
HelpText: ""
Culture: 0
LegacyIAccessible.ChildId: 0
LegacyIAccessible.DefaultAction: ""
LegacyIAccessible.Description: ""
LegacyIAccessible.Help: ""
LegacyIAccessible.KeyboardShortcut: ""
LegacyIAccessible.Name: "python - Most efficient way to select all and copy in Windows - Stack Overflow - Google Chrome"
LegacyIAccessible.Role: pane (0x10)
LegacyIAccessible.State: normal (0x0)
LegacyIAccessible.Value: ""
Transform.CanMove: false
Transform.CanResize: false
Transform.CanRotate: false
Window.CanMaximize: true
Window.CanMinimize: true
Window.IsModal: false
Window.IsTopmost: false
Window.WindowInteractionState: ReadyForUserInteraction (2)
Window.WindowVisualState: Maximized (1)
IsAnnotationPatternAvailable: false
IsDragPatternAvailable: false
IsDockPatternAvailable: false
IsDropTargetPatternAvailable: false
IsExpandCollapsePatternAvailable: false
IsGridItemPatternAvailable: false
IsGridPatternAvailable: false
IsInvokePatternAvailable: false
IsItemContainerPatternAvailable: false
IsLegacyIAccessiblePatternAvailable: true
IsMultipleViewPatternAvailable: false
IsObjectModelPatternAvailable: false
IsRangeValuePatternAvailable: false
IsScrollItemPatternAvailable: true
IsScrollPatternAvailable: false
IsSelectionItemPatternAvailable: false
IsSelectionPatternAvailable: false
IsSpreadsheetItemPatternAvailable: false
IsSpreadsheetPatternAvailable: false
IsStylesPatternAvailable: false
IsSynchronizedInputPatternAvailable: false
IsTableItemPatternAvailable: false
IsTablePatternAvailable: false
IsTextChildPatternAvailable: false
IsTextEditPatternAvailable: false
IsTextPatternAvailable: false
IsTextPattern2Available: false
IsTogglePatternAvailable: false
IsTransformPatternAvailable: true
IsTransform2PatternAvailable: false
IsValuePatternAvailable: false
IsVirtualizedItemPatternAvailable: false
IsWindowPatternAvailable: true
IsCustomNavigationPatternAvailable: false
IsSelectionPattern2Available: false
FirstChild: "python - Most efficient way to select all and copy in Windows - Stack Overflow" document
LastChild: "Google Chrome" pane
Next: "Accessibility tools - Inspect - Windows applications | Microsoft Docs - Google Chrome" pane
Previous: "" pane
Other Props: Object has no additional properties
Children: "python - Most efficient way to select all and copy in Windows - Stack Overflow" document
"" pane
(null) title bar
"Google Chrome" pane
Ancestors: "Desktop 1" pane
[ No Parent ]
我们可以从中提取我们想要的东西。
实际例子
假设我们的目标是获取您问题中的所有文本。
我们将每个窗口或程序可视化为树的上级节点。
我们必须首先通过同时按 Ctrl + Shift + F7 进入第一个孩子（我们也可以同时按 Ctrl + Shift + F9 进入最后一个孩子，但在这种情况下是另一种方式更快 - 请注意图像并未显示我打开的所有窗口/程序）。这将在树的下一层，读取 Inspect (HWND: 0x001306A2) UIAccess。
因为这不是我们想要的窗口/程序，所以我们必须对它做点什么。为了到达我们想要的，我们必须导航到下一个兄弟姐妹，然后导航到下一个兄弟姐妹和下一个兄弟姐妹。所以我们必须同时按 Ctrl + Shift + F8 三次。如果我们运行它四次而不是三次，我们可以同时使用按 Ctrl + Shift + F5（Previous Sibling）。
在这个具体案例中，我们发现问题的正文分为三个部分
通过查看图像右侧的名称（我们可以同时按 CTRL + Shift + 4 复制的区域）我们看到
Name: "I've a script that scrapes data from a third party program. Currently I'm using emulated keyboard strokes to select and copy data:"
text 的另外两个兄弟拥有其余的信息，所以我们必须一一访问它们并复制它们的内容（要返回父级，我们按 CTRL + Shift + F6）。
注意：如果我知道您使用的是什么第三方程序以及您想要的具体内容，我可以给出更详细的解释，但对于前面的示例，它已经可以看看怎么做。
【讨论】：
【参考方案2】：一个技巧是结合sendkey命令来提高速度，虽然我觉得这不是你程序的主要关注点。
shell.SendKeys('^a^c')
如果您在循环中多次运行此脚本，也可能导致系统变慢，因此添加延迟会有所帮助。
如果您愿意使用其他语言并且只希望自动执行简单的全选 + 复制（尽管它不在 Python 中），您也可以制作 AutoIt 脚本文件。它只是作为后台任务运行，只需要很少的计算能力，并且可以绑定在任何键上运行，例如。 'z'。
HotKeySet ( "z" [, "select_copy"] )
While 1
Sleep(100)
WEnd
Func select_copy()
send("^a")
send("^c")
EndFunc
希望这些帮助！
【讨论】：
以上是关于JS中全选加法的两个问题的主要内容，如果未能解决你的问题，请参考以下文章