Question: I'm having problems with my code. It's a checkbox in an Advanced Custom Fields block that's suppose to change the color of a background. When you click on the checkbox, it doesn't change the color. I know that ACF blocks have to use `$(document).on('change', function ()` and I am able to do other functions that work except clicking on a checkbox.

My code:

```
jQuery(document).ready(function ($) {
   $(document).on('change', function () {
      if ($("input#acf-block_60160a1a4dc32-field_5f8cf27e7c048-two_img_left_set_featured_img").is(':checked')) {
        $(".acf-field-5f8cf27e7c048").css({'background':'black'});
      } else {
        $(".acf-field-5f8cf27e7c048").css({'background':'white'});
      }
   });
});

```

Answer: 
Can't say I have any experience with wordpress, but from a general view, having a single `change` listener for the entire document could have unintended consequences, since anything the fires a change (other inputs, selects, textareas, etc) will run this code. Have you tried providing a selector argument with the [.on() method](https://api.jquery.com/on/) to better scope this handler?

```
$(document).on(`change`, `input#acf-block_60160a1a4dc32-field_5f8cf27e7c048-two_img_left_set_featured_img`, function () {
  $(`.acf-field-5f8cf27e7c048`).css(`background`, $(this).is(`:checked`) ? `black` : `white`);
});

```
@Gregory The radio button is the right way to achieve this. Below is the both way to do by radion and also by checkbox.

With radio button, for example below is your html.

```
<input type="radio" class="myclass" value="colorwhite" name="mycolor">white
<br>
<input type="radio" class="myclass" value="colorblack" name="mycolor" checked="checked">black

```

And below is your javascript code

```
<script>
jQuery(document).on('click', '.myclass', function(e){
var radioValue = jQuery("input[name='mycolor']:checked").val();
if(radioValue){
console.log('radioValue ' + radioValue);
}

if(radioValue =="colorwhite")
{
jQuery(".acf-field-5f8cf27e7c048").css({"background-color": "white"});
}

if(radioValue =="colorblack")
{
jQuery(".acf-field-5f8cf27e7c048").css({"background-color": "black"});
}

});
</script>

```

By Checkbox. below is the example to achieve it.

```
<input type="radio" class="myclass" value="colorwhite" name="mycolor">white
    <br>
    <input type="radio" class="myclass" value="colorblack" name="mycolor" checked="checked">black

<script>
    jQuery(document).on('click', '.myclass', function(e){
    var selected_color = jQuery("input[name='mycolor']:checked").val();
    if(selected_color){
    //console.log('radioValue ' + selected_color);
    }

    if(selected_color =="colorwhite")
    {
        console.log(selected_color);
    jQuery(".acf-field-5f8cf27e7c048").css({"background-color": "white"});
    }

    if(selected_color =="colorblack")
    {
        console.log(selected_color);
        jQuery(".acf-field-5f8cf27e7c048").css({"background-color": "black"});
    }

    });
    </script>

```