I want to change the font color of all the checked elements to red.

I have tried $("input:checkbox[name^='course_select']:checked").css('color', 'red'), but it does not work. There are no errors in the console.

When I changed to $("*").css('color', 'red') for debugging, all the text could be changed to red.

function AlertFunction() {$("input:checkbox[name^='course_select']:checked").css('color', 'red');}

<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.60/inputmask/jquery.inputmask.js"></script>

<input type="checkbox" name="course_select">item1
<input type="checkbox" name="course_select2">item2
<input type="checkbox" name="course_select3">item2
 <button  type="button" onclick="AlertFunction()">change color</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Your JS code does work and set the color of the checkbox to red. That doesnt do anything tho as the text isnt in the checkbox itself but stands next to it as regular text.

Id recommend to wrap every checkbox/text combination in a label and color the label (the label wrapping makes the text accessible and clickable too!).

Id also add some reset to the color so if you uncheck and submit the red color disappears.

function AlertFunction() {
  // reset all colors
  $("input:checkbox[name^='course_select']").parent('label').css('color', '');
  
  // color checked ones
  $("input:checkbox[name^='course_select']:checked").parent('label').css('color', 'red');
}

<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.60/inputmask/jquery.inputmask.js"></script>

<label>
  <input type="checkbox" name="course_select">
  item1
</label>

<label>
  <input type="checkbox" name="course_select">
  item2
</label>

<label>
  <input type="checkbox" name="course_select">
  item3
</label>

<button  type="button" onclick="AlertFunction()">change color</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

To achieve what you require you need to set the color rule on a container of the text label related to the checked box, not the box itself. A label element is perfect for this.

Also, as well as adding the red colour to the checked boxes, you will also need to remove it from the unchecked ones.

Note in the following example the user of jQuery a event handler instead of the inline onclick event handler, which should be avoided, and the use of CSS classes to add/remove styling.

jQuery($ => {
  $('.change-color-trigger').on('click', e => {
    e.preventDefault() // just in case your button is inside a form element
    $('label').removeClass('checked');
    $('label:has(:checkbox:checked)').addClass('checked');
  });  
});

label.checked { color: red; }

<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.60/inputmask/jquery.inputmask.js"></script>

<label><input type="checkbox" name="course_select">item1</label>
<label><input type="checkbox" name="course_select2">item2</label>
<label><input type="checkbox" name="course_select3">item2</label>
<button type="button" class="change-color-trigger">change color</button>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>