How to verify if a check box is checked?

Question

I am currently trying to make my checkbox show a popup for browser notifications if it is checked. If the user unchecked it the browser notification will popup to declined vice-versa.

here is a snippet of what I am trying right now but it is not working.

if(checkbox_id == (queue_notification)) {
        if(checkbox_state) {
          $('input#user_hop_queue_notification').is(':checked') == '1'
             if(Notification.requestPermissionre !== "granted"){
              Notification.requestPermission(function(status) {
                console.log('Notification permission status:', status);
              });
            }
          }
        else {
          $('input#user_hop_queue_notification').is(':checked')== ('0');
          if(Notification.requestPermission !== "denied"){
              Notification.requestPermission(function(status) {
                console.log('Notification permission status:', status);
              });
            }
          }
      }

Answer 1

The Notification Api is something that the user can deny also so you even if you set the Notification.permission property to granted that will not work. So your best chance is to use the Notification.requestpermission method and check if the user has granted notification access then use to notification api to show notifications. Thanks.

Answer 2

Your code looks very weird, you seem to test the value of is(':checked') , but you actually do not (no if -statement??). There is a variable checkbox_state which is tested but not set? And, you seem to test if the value of is(':checked') returns the string 0 or 1 . While this works, if you test this manually in the console, or check the documentation, you would see it returns true or false , so that could make your code a lot simpler too.

So I would write your code as follows:

  if(checkbox_id == (queue_notification)) {
    checkbox_state = $('input#user_hop_queue_notification').is(':checked'); 
    if(checkbox_state) {
      if(Notification.requestPermissionre !== "granted"){
          Notification.requestPermission(function(status) {
            console.log('Notification permission status:', status);
          });
      } 
    } else {
      if(Notification.requestPermission !== "denied"){
          Notification.requestPermission(function(status) {
            console.log('Notification permission status:', status);
          });
      }
    }
  }

If I understood your intention correctly, this should work more as expected. We could refactor the check_state variable away, as we have no further use for it (but for now I wanted to stay closer to your original code)(it might still improve readability, so that would be a good reason to keep it, however the is(:checked) is pretty self-explanatory on its own).

If you are trying to set the checked state, you should use the following code:

 $('input#user_hop_queue_notification').prop('checked', true);

(if not obvious, true will "check" the checkbox, false will uncheck).