如何在选中复选框时隐藏内容并在未选中复选框时显示？答案

【问题标题】：How to hide content when checkbox is checked and show when checkbox is unchecked?如何在选中复选框时隐藏内容并在未选中复选框时显示？
【发布时间】：2021-11-18 19:22:02
【问题描述】：

我有一个社交媒体主页新闻提要拦截器 chrome 扩展程序。我想在即将发布的版本中推出一项新功能，用户可以在设置菜单中打开或关闭各个站点的提要。我已经建立了一个 settings.html 和一个 background.js 文件。 Settings.html 将是用户可以使用复选框打开或关闭提要的设置页面。

我希望代码执行的操作：如果用户选中该框，我希望主页新闻源隐藏，否则，我希望源显示。

我怀疑代码不起作用，因为我需要对 manifest.json 文件进行一些更改。

清单文件有以下内容（我用“//”删除了私有内容

{
    "manifest_version": 2,
    "name": "//",
    "version": "//",
    "description": "//",
    "author": "//",

    "icons": {
        "128": "//"
    },

    "content_scripts": [{
        "html": ["settings.html"],
        "js": ["jquery-3.6.0.min.js", "background.js"],
        "css": ["tiktok.css", "linkedin.css", "youtube.css", "insta.css", "facebook.css", "twitter.css", "reddit.css", "settings.css"],
        "matches": ["https://www.tiktok.com/*", "https://www.linkedin.com/*", "https://www.youtube.com/*", "https://www.instagram.com/*", "https://www.facebook.com/*", "https://twitter.com/*", "https://www.reddit.com/"]
    }],
    
    "background":
    {
        "scripts": ["jquery-3.6.0.min.js", "background.js"]
    },

    "browser_action": {
        "default_title": "//",
        "default_popup": "//"
    }
}

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset = ”UTF-8”>
        <script src="jquery-3.6.0.min.js"></script>
        <script src = "background.js"></script>
        <title>Settings</title>
    </head>
    <body class="settings">
        <h1 class = "classa">Settings</h1>
        <h2>Feed Blocking Preferences</h2>
        <h4>Checkboxes to turn all or individual feeds on or off.</h4>
        <input type="checkbox" class = "jiji" id="fbbox">//</input>
    </body>
</html>

在下面的代码中，“jiji”类用于我在 settings.html 文件中的输入元素（复选框）。 “tn0ko95a”类用于在社交媒体网站上隐藏主页新闻源的类。这不是我自己的课程，我是从社交媒体网站上的“检查元素”中得到的。

此代码有效：

$(function () {
 $(".tn0ko95a").hide();
});

但是当我向这段代码添加更多内容时，它不起作用：

$(function () {
  $(".jiji").click(function () {
    if ($(this).is(":checked")) {
      $(".tn0ko95a").hide();
    } else {
      $(".tn0ko95a").show();
    }
  });
});

那么为什么最后一个代码不起作用？

【问题讨论】：

标签： javascript html google-chrome-extension google-contacts-api manifest.json

【解决方案1】：

尝试更改而不是点击

$(function () {
  $(".jiji").change(function () {
    if ($(this).is(":checked")) {
      $(".tn0ko95a").hide();
    } else {
      $(".tn0ko95a").show();
    }
  });
});

或者你可以使用鼠标向下看这个例子 jQuery checkbox change and click event

【讨论】：

谢谢。 HTML 输入元素呢？你有什么建议我在那里改变吗？我听说我们不需要添加 onchange 或 onclick = ... 如果使用 jquery。这是真的吗？
我们没有在输入中添加任何 onchange 事件，给出的答案完全由 jquery 处理
嘿！答案没有奏效。我怀疑我需要对清单进行一些更改。也许我需要使用一些 chrome API 来完成这项工作。
您想隐藏代码中的哪个元素（或任何其他非代码元素）的问题