如何通过JavaScript动态修改:checked伪类样式？

Great question! You're right that directly modifying the :checked pseudo-class styles via JavaScript isn't as straightforward as changing regular inline styles—since pseudo-class styles live in CSS rule sets, not on the element itself. But there are two clean, maintainable ways to achieve what you want:

Option 1: Use CSS Classes for Targeted Checked Styles #

This is the most standard approach, keeping styling logic in CSS where it belongs. First, add custom classes to your stylesheet for the different checked states:

/* Your existing styles here */

/* Custom red checked state */
ul.ks-cboxtags li.red-check input[type="checkbox"]:checked + label {
    background-color: red;
    border-color: #990000;
    color: #fff;
    transition: all .2s;
}

/* Custom blue checked state */
ul.ks-cboxtags li.blue-check input[type="checkbox"]:checked + label {
    background-color: blue;
    border-color: #000099;
    color: #fff;
    transition: all .2s;
}

Then, attach the corresponding class to each <li> when you create it in jQuery:

// Red checked style for items 1 and 2
$li = $(`<li class="red-check"><input type="checkbox" name="issueCheck" id="check-1" value="1"><label for="check-1">1</label></li>`);
$('#issueCheckUl').append($li);

$li = $(`<li class="red-check"><input type="checkbox" name="issueCheck" id="check-2" value="2"><label for="check-2">2</label></li>`);
$('#issueCheckUl').append($li);

// Blue checked style for item 3
$li = $(`<li class="blue-check"><input type="checkbox" name="issueCheck" id="check-3" value="3"><label for="check-3">3</label></li>`);
$('#issueCheckUl').append($li);

Note: I added a check- prefix to the IDs because numeric-only IDs can cause unexpected issues in CSS selectors—this is a best practice for valid, reliable selectors.

Option 2: Dynamically Inject CSS Rules with JavaScript #

If you need to set styles on the fly (e.g., colors come from user input or an API), you can create a <style> element and inject custom rules directly:

// Create a new style element
const customCheckedStyles = document.createElement('style');

// Add your targeted checked state rules
customCheckedStyles.textContent = `
    ul.ks-cboxtags li #check-1:checked + label,
    ul.ks-cboxtags li #check-2:checked + label {
        background-color: red;
        border-color: #990000;
        color: #fff;
        transition: all .2s;
    }
    ul.ks-cboxtags li #check-3:checked + label {
        background-color: blue;
        border-color: #000099;
        color: #fff;
        transition: all .2s;
    }
`;

// Append the style to the document head
document.head.appendChild(customCheckedStyles);

// Create your list items as usual (with prefixed IDs)
$li = $(`<li><input type="checkbox" name="issueCheck" id="check-1" value="1"><label for="check-1">1</label></li>`);
$('#issueCheckUl').append($li);

$li = $(`<li><input type="checkbox" name="issueCheck" id="check-2" value="2"><label for="check-2">2</label></li>`);
$('#issueCheckUl').append($li);

$li = $(`<li><input type="checkbox" name="issueCheck" id="check-3" value="3"><label for="check-3">3</label></li>`);
$('#issueCheckUl').append($li);

The specific selector (ul.ks-cboxtags li #check-1) ensures your custom rules take priority over the default checked styles without needing !important.

Why Can't You Modify :checked Styles Directly? #

Pseudo-classes like :checked are part of global CSS rule sets, not the element's inline style property. JavaScript's element.style API only controls inline styles, which don't affect pseudo-class states. That's why we need to either use CSS classes (to leverage existing rule sets) or inject new CSS rules dynamically.

内容的提问来源于stack exchange，提问作者whitebear