【问题标题】:Bookmarklet to actually click on checkboxes?真正点击复选框的书签?
【发布时间】:2021-08-31 01:00:38
【问题描述】:

我有一个页面,一方面我有几个不同的对象,另一方面我有一个复选框网格,每个人都一样,但每个对象的值都是自定义的。
Obj A 可以选择框 1 和未选择框 2,
Obj B 可以选择框 1 和框 2
但网格方案本身对于所有对象都是相同的。

我需要能够将复选框值从一个特定对象复制到另一个对象并将我的工作保存在服务器端。
我创建了一个纯 JS 小书签,它将复选框网格的“已选中”的实际值保存到 sessionStorage 中:

javascript: var test = []; 
   var check = document.getElementsByClassName("CheckboxGrid");  
   for (var i = 0; i < check.length; i++)   {    
                      test.push(check[i].checked);}  
   sessionStorage.setItem('val', JSON.stringify(test));

我在同一页面上使用第二个书签来复制复选框网格的值:

javascript: var gridValues = sessionStorage.getItem('val'); //returns an array of Char
   var i = 0; 
   var y = 0; 
   var checkboxes = document.getElementsByClassName("CheckboxGrid");

   while (y<checkboxes.length) 
   {     
        if (gridValues[i] == 't')
                     {checkboxes[y].checked=true; y++; i++;}
        else if (gridValues[i] == 'f')
                     {checkboxes[y].checked=false; y++; i++;}
        else     {i++;}
   }

代码“有效”,这意味着在屏幕上我可以看到第二个网格上第一个网格的精确副本;问题是第二个小书签看起来只是在改变盒子的“外观”,而不是实际操作它们。
事实上,当我保存或单击复选框时,一切都会恢复到书签操作之前的状态。

我做错了吗?是否真的可以让小书签点击复选框并在页面上保留其更改,即使在以后的用户输入(例如点击另一个框)之后也是如此?

谢谢大家

【问题讨论】:

    标签: javascript checkbox bookmarklet


    【解决方案1】:

    首先让我们让您的第二个脚本更具可读性:

    javascript: var gridValues = JSON.parse(sessionStorage.getItem('val'));
    var checkboxes = document.getElementsByClassName("CheckboxGrid");
    for (var i = 0; i < checkboxes.length; i++)   {    
        checkboxes[i].checked = gridValues[i];
    }
    

    代码本身应该可以正常工作。它将复选框设置为正确的状态,而不仅仅是视觉上。

    “当我保存时”是什么意思?将选择保存到服务器有什么逻辑吗?是否有任何其他 JS 可能会操纵您的复选框?

    【讨论】:

    • 当我使用此页面并手动勾选/取消勾选特定对象上的复选框时,我必须单击保存按钮以保留更改,否则它们将被自动丢弃。据我了解,这是唯一一次联系服务器 - 我是菜鸟,但可能会遗漏一些东西:)
    • 事实上,我认为书签本身并不是真正在网格上“书写”,而不仅仅是改变网格外观。当我在页面上手动工作并勾选/取消勾选一个框时,我可以在修改后的复选框附近看到一个红点,以快速查看我所做的更改;当我运行第二个脚本时,这个红点没有出现
    • 可能有任何问题 :) 如果问题在于您正在向服务器发送一组复选框,但在重新加载服务器返回给您另一个复选框后,实际上您的页面有可能检测到以不同的方式选中复选框。它可能没有检查真正的复选框的“已检查”。如果有什么方法可以验证。发送到服务器的内容 - 需要首先检查(例如,如果它是 XHR,则在网络选项卡中,或者如果保存适用于页面重新加载,则启用“保留日志”)
    猜你喜欢
    • 2013-08-13
    • 2011-01-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多