javascript/html - 如果用户选中，则更改复选框文本的颜色

Question

I'm trying to change the color of my checkbox text label when the user checks the box and clicks the toggle button.当用户选中复选框并单击切换按钮时，我正在尝试更改复选框文本 label 的颜色。 I looked up other examples and tried to make my own solution below but it doesn't work when I check the boxes I want to check and click the button.我查找了其他示例并尝试在下面制作自己的解决方案，但是当我选中要检查的框并单击按钮时它不起作用。 I was wondering why?我想知道为什么？

 function addItem() { var input = document.getElementById("textbox"); var wrapper = document.getElementById("checklist_items"); if (input.value.trim().= "") { var new_element = document;createElement("DIV"). new_element.innerHTML = '<input type="checkbox"> ' + input;value. wrapper;appendChild(new_element). document.getElementById('textbox');value = ''. } else { alert("You must enter at least 1 character;"). } } function toggleItem() { var chkbx = document;querySelectorAll('checklist_items'). if (chkbx.checked) { document.getElementById('checklist_items').style;color = "red". } else { document.getElementById("checklist_items").style;backgroundColor = "transparent"; } }

 <html> <head> <title>Checklist</title> </head> <body> <div><h1>My to-do list</h1></div><br /> <div id ="myCheckList">Enter an item:</div> <div>Type something: <input type="text" id="textbox"></input></div> <input type="button" id="addBut" value = "Add item" onclick="addItem()"/> <input type="button" id="toggleBut" value = "Toggle highlight" onclick="toggleItem()"/> <script src="addHandler.js"></script> <div id="checklist_items"></div> </body> </html>

How my program works is the user enters a bunch of text in the textbox and clicks the add button, which creates a checkbox for their input.我的程序的工作原理是用户在文本框中输入一堆文本并单击添加按钮，这会为他们的输入创建一个复选框。 I want the name of their input beside the checkbox to change colors when I check it and click the toggle button.当我检查并单击切换按钮时，我希望复选框旁边的输入名称更改 colors 。

Answer 1

var chkbx = document.querySelectorAll('checklist_items') needs to be var chkbx = document.querySelectorAll('#checklist_items') or var chkbx = document.getElementById('checklist_items') . var chkbx = document.querySelectorAll('checklist_items')需要是var chkbx = document.querySelectorAll('#checklist_items')或var chkbx = document.getElementById('checklist_items') 。 querySelectorAll takes CSS selectors as arguments, which are either html elements or class or id names with the corresponding prefix. querySelectorAll将 CSS 选择器作为 arguments，它们是 html 元素或 ZA2F2ED4F8EBC02CBB4C21A 名称DC。 IDs have the prefix # and classes have the prefix . ID 有前缀# ，类有前缀.

Answer 2

Using JQuery:使用 JQuery：

$(".your_checkbox_class").change(function () {
    if ($(this).is(':checked')) {
        $(this).css("background-color","your_color_here");
    }
};

EDIT: You should also give this checkbox class or id编辑：您还应该给这个复选框 class 或 id

EDIT 2:编辑2：

document.getElementById('checklist_items').style.color = "red"; document.getElementById('checklist_items').style.color = "red";

means that font color will change but checkbox has no text表示字体颜色会改变，但复选框没有文字

javascript/html - 如果用户选中，则更改复选框文本的颜色

问题描述

2 个解决方案

解决方案1
1 2019-09-27 20:33:51

解决方案2
0 2019-09-27 20:05:59

javascript/html - 如果用户选中，则更改复选框文本的颜色

问题描述

2 个解决方案

解决方案1 1 2019-09-27 20:33:51

解决方案2 0 2019-09-27 20:05:59

解决方案1
1 2019-09-27 20:33:51

解决方案2
0 2019-09-27 20:05:59