How to hide content when checkbox is checked and show when checkbox is unchecked?

Question

I have a social media homepage newsfeed blocker chrome extension. I want to roll out a new feature in my upcoming version where users can turn the feed of individual sites on or off in the settings menu. I have built a settings.html and a background.js file. Settings.html will be the settings page where users can turn the feeds on or off with checkboxes.

What I want the code to do: I want the home page newsfeed to hide if the user checks on the box, otherwise, I want the feed to show.

I suspect the code is not working because I need to make some changes to my manifest.json file.

The manifest file has the following (I removed private stuff with "//"

{
    "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": "//"
    }
}

The 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>

In the code below, the class "jiji" is for my input element (the checkbox) in the settings.html file. The class "tn0ko95a" is for the class that hides the homepage newsfeed on a social media website. This isn't my own class, I got this from doing 'inspect element' on the social media website.

This code works:

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

But when I add more to this code, it does not work:

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

So why is the last code not working?

Wamiq Rehman · Answer 1 · 2021-11-18T19:51:06.057

0

Try change instead of click

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

Or you can use mouse down see this example jQuery checkbox change and click event

edited Nov 18 '21 at 19:51

answered Nov 18 '21 at 19:48

Wamiq Rehman

566
3
11

Thanks. What about the HTML input element? Anything you recommend I change there? I heard that we don't need to add onchange or onclick = ... if using jquery. Is that true? – abc_13 Nov 18 '21 at 19:50
– Wamiq Rehman Nov 18 '21 at 19:52
We are not adding any onchange event in input the answer given is purely handled by jquery – Wamiq Rehman Nov 18 '21 at 19:52
Hey! The answer did not work. I suspect I need to make some changes to the manifest. Maybe I need to use some chrome API to make this work. – abc_13 Nov 18 '21 at 20:07
A question which element in your code(or any other element not from your code) you want to hide – Wamiq Rehman Nov 18 '21 at 20:33
Well, the class is for a div element with other elements inside it. It essentially hides the homepage newsfeed on a social media website. – abc_13 Nov 19 '21 at 01:39

How to hide content when checkbox is checked and show when checkbox is unchecked?

1 Answers1