Checkbox Toggle Switch with Checked/Unchecked values

Question

I have a form that submits data to my database. I currently have a dropdown with two options. To simplify things I would like to replace the dropdown with a (yes/no or on/off) toggle switch. I assume a check box is the best way to handle this. This requires the checkbox to have a checked value (ON), and an unchecked value (OFF) that I can submit in the form.

I have looked into several solutions but can't seem to get anything to work properly.

I have tried the way described here: Post the checkboxes that are unchecked, but when the box is checked, the value submitted is ON,OFF, rather than ON.

One other thing is that I would like the checkbox to show its current value.

I am using ASP.NET Web Pages.

I hope that all makes sense. Any suggestions would be great.

score 0 · Answer 1 · answered Sep 18 '13 at 21:35

Better to use radio buttons I think. Each pair will have the same name, with each button having a different value. Only one from each pair can be checked, so you'll always know which value ("on" or "off") is selected. This avoids dealing with unchecked check boxes.

yuvi · Answer 2 · 2013-09-18T22:43:05.903

Since checkboxes are boolean, you are technically already getting the data you want without doing anything. Since you know what checkboxes are included in the form to begin with, why not let the form submit just the checked ones and then compare it with the list of available checkboxes to know which are off?

Edit

I think I understand where the confusion is.

There are two types of Boolean fields that are very common - one that is either True or False, and one that can be True, False or Null. This is an important difference.

For the first type, using checkboxes is perfect, since by collecting all the 'true' (or 'on') values, you are also automatically collecting the False ones. However, using the second option, doing it with checkboxes could be kinda messy and you should probably use a <select> instead of a checkbox.

Anyway, if you set your mind to using checkboxes anyway, it is really easy to see if a checkbox is check or not using the .checked. Here's a jsfiddle the logs each checkbox id and tells the console if it is checked or not. I used console.log() which requires chrome, but you can obviously replace that with whatever you want (alert or a function or what not).

$('button').on('click', function() {
      var chbx = $('input[type=checkbox]');    
      $.each(chbx, function( index, value ) {
          console.log(value.id+':'+value.checked);        
    });
});

If you want to add values to the checkboxes you can add custom attributes to the input tag <input type='checkbox' myattr='whateva' > and easily access them using jQuery (though that won't work on IE8 or older).

I want to actually submit a value to be used in other areas. — Jack, Sep 18 '13 at 21:43
It shouldn't really matter. It's a boolean field. By getting only the 'on' values you are also getting the 'off' ones. I don't understand what are the `other areas` you mean. Maybe you should show some of your code so we would better understand what you are trying to do — yuvi, Sep 18 '13 at 21:46
By other areas, I mean other areas in the site rely on the true or false value being in the database. — Jack, Sep 18 '13 at 21:51
That's fine. But then what's the problem? If I have a table of users, that has a few boolean columns, each one has to be either True or False. If it is not True, then it is False. It is in the database. Perhaps you are using a Null-BolleanField? (which allows boolean columns to be null as well as true or false). In that case, a ` — yuvi, Sep 18 '13 at 21:56
I added more full answer, hopefully that'll clear things up a bit. — yuvi, Sep 18 '13 at 22:43

score 0 · Answer 3 · answered Sep 18 '13 at 21:44

You can check if a box is checked by doing something like

if(document.getElementById('yourCheckBox').checked) {
    // true
} else {
    // false
}

I do not believe an unchecked checkbox will pass anything to your server script so on the server side check if the id passed is empty. If its empty do something, else its not empty and do something else.

Hope I understood your question correctly.

Checkbox Toggle Switch with Checked/Unchecked values

3 Answers3