Checking if checkboxes are checked, then unchecked

I’m using the following code to see if a checkbox is checked and then setting it to true if it is:

    $q2choice1.on('click', function() {
$(this).data('clicked', true);
    });

Then running a function to display specific messages depending on which checkbox is clicked:

    $q1submit_button.on('click', function() {
  if($q1choice35.data('clicked')) {
    showMsg();
  } else if($q1choice41.data('clicked')) {
    showMsg();
  } else if($q1choice52.data('clicked')) {
    showMsg();
  } else if($q1choice64.data('clicked')) {
    $q1correct.show();
    $q1error.hide();
  }
  $q1next_button.show();
  $q1submit_button.hide();
});

The problem is, that if someone clicks on a checkbox choice, it registers as true and then if they change their minds and choose another checkbox, another instance is set to true. How can I modify the code such that there can only be one true condition set?

Add an option in your onclicks to set the other options to unchecked.

That being said, I’m not sure why you’re trapping the click event in the first place. Let the element do what it’s supposed to do in the first place. Use the javascript to set the checked attribute (and uncheck the others), but I don’t think tracking the click is the best approach…

Thanks. I created a reset function that clears all of the checked = true before setting one.

If only one can be selected then you should be using radio buttons. The whole point of checkboxes is that the person can select any or all of them.

Thanks. This is for an experience that is built in an online interactive tool, not an HTML-based page, so I’m working around some of the limitations of the tool.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.