jQuery CSS Classes
Use class changes for reusable presentation and keep control state synchronized with the visible result.
How it works
addClass, removeClass and toggleClass change class membership without replacing the element. An explicit class name and boolean state make toggle behaviour easy to review. Here a checkbox controls whether a book card is highlighted. The handler reads the live checkbox property and applies that boolean to the class. It also reports the local choice in text, because colour or a border alone should not carry all of the meaning.
Run in a separate local browser lab
Save this complete HTML source as index.html in an empty folder. Put the pinned full jQuery 4.0.0 file beside it and preserve the MIT licence notice. The document includes its own CSS and JavaScript. Bhylu’s shared website theme does not load jQuery globally.
Open index.html directly in a normal browser. You may also use the optional loopback fixture server with Node 22 if you want the same HTTP setup as the network lessons.
jQuery examples do not run in Bhylu’s current playground: it blocks external libraries and network access. No Apache, MySQL or website configuration change is needed. Review the full-build setup before using Ajax, effects or plugins.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Make a Class Reflect One Explicit Boolean Choice</title>
<style>
:root {
font:
18px/1.6 system-ui,
sans-serif;
color: #16304e;
background: #fff;
color-scheme: light;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
main {
max-width: 50rem;
margin: auto;
padding: 1.25rem;
}
h1 {
font-size: 1.8rem;
line-height: 1.2;
}
h2 {
font-size: 1.3rem;
}
button,
input,
select,
textarea {
font: inherit;
max-width: 100%;
}
button {
margin: 0.2rem;
padding: 0.4rem 0.7rem;
background: #034fa0;
color: white;
border: 1px solid #034fa0;
border-radius: 0.3rem;
}
button:disabled {
opacity: 0.6;
}
label {
display: block;
margin: 0.5rem 0;
}
input:not([type='checkbox']),
select,
textarea {
display: block;
padding: 0.3rem;
}
a {
color: #034fa0;
}
output {
display: block;
}
article,
section,
fieldset {
padding: 0.75rem;
margin-block: 0.75rem;
border: 1px solid #a9bcd1;
}
ul {
padding-left: 1.5rem;
}
:focus-visible {
outline: 3px solid #0078d4;
outline-offset: 3px;
}
.chosen {
border: 3px solid #0078d4;
}
.highlight {
font-weight: 700;
}
.muted {
opacity: 0.7;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
:root[data-theme='dark'] {
color: #d6e7fb;
background: #061d30;
color-scheme: dark;
}
:root[data-theme='dark'] a {
color: #8ecbff;
}
</style>
</head>
<body>
<main>
<h1>Neighbourhood book swap</h1>
<label><input id="choose" type="checkbox" />Plan this book</label>
<article id="book"><h2>River Paths</h2></article>
<output>No local choice</output>
</main>
<script src="jquery.min.js"></script>
<script>
jQuery(function ($) {
$('#choose').on('change', function () {
const chosen = $(this).prop('checked');
$('#book').toggleClass('chosen', chosen);
$('output').text(chosen ? 'Chosen locally' : 'No local choice');
});
});
</script>
</body>
</html>
Expected result
Checking the box highlights the card and says Chosen locally; unchecking removes both states.
The checked value is the authority for this small interaction. There is no separate flag that can drift from the control. Keep static style definitions in CSS rather than writing many inline properties in each event handler. A class can communicate a state to styling, while an appropriate native control or ARIA state communicates its interaction semantics.
Use jQuery’s official API documentation for exact method and return contracts.