Atheri Atheri - 2 months ago 16
HTML Question

Checkbox values fail if not selected?

I'm building this

checkbox
that it woyld only work if all 3 checkboxes are
checked
on the web. Otherwise it will fail.

I tried to set without
value
- but it doesn't work at all.

I tried to give them the same
value
as the name or field - doesn't work.

Works only if the
value
is set as
true
- but for some reason it expects it all to be
true
?



<fieldset class="question-fieldset twocolinputs">
<h2>Question #81:</h2>
<div class="answer-single">
<input id="2-a" name="MX3A" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-a">
Email
</label>
</div>
<div class="answer-single">
<input id="2-b" name="MX3B" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-b">
SMS
</label>
</div>
<div class="answer-single">
<input id="2-c" name="MX3C" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-c">
Llamada
</label>
</div>
</fieldset>




Answer Source

Update

Demo 2 is an example of radio button pairs with the value of true and false strings submitted to server.

It seems that everyone is assuming that you want the checkboxes checked by default. Although I could be mistaken, I don't interpret it that way. What I gather is that you only get a value submitted if all of your checkboxes are checked which is odd. As a test I have placed your unmodified code inside a <form> and added a <input type='submit'> button, then posted the <form> to a test server. It will only send the values of the checkboxes that are checked as expected.

Demo 1 - PLUNKER

Demo 1 - STACK (Does not function due to SO security measures, see PLUNKER for a functioning example)

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <form id='main' method='post' action='http://httpbin.org/post'>
    <fieldset class="question-fieldset twocolinputs">
      <h2>
        Question #81:
      </h2>
      <div class="answer-single">
        <input id="2-a" name="MX3A" type="checkbox" class="checkbox-button-input" value="true">
        <label class="answer-label" for="2-a">
                     Email
                     </label>
      </div>
      <div class="answer-single">
        <input id="2-b" name="MX3B" type="checkbox" class="checkbox-button-input" value="true">
        <label class="answer-label" for="2-b">
                     SMS
                     </label>
      </div>
      <div class="answer-single">
        <input id="2-c" name="MX3C" type="checkbox" class="checkbox-button-input" value="true">
        <label class="answer-label" for="2-c">
                     Llamada
                     </label>
        <input type='submit'>
      </div>
    </fieldset>
  </form>
</body>

</html>

Demo 2 - PLUNKER

Demo 2 - STACK (See PLUNKER for working example)

<!DOCTYPE html>
<html>

<head>
  <style>
    input,
    label {
      font: inherit
    }
    
    [type=submit] {
      float: right
    }
    
    ;
  </style>

</head>

<body>
  <form id='main' method='post' action='http://httpbin.org/post'>
    <fieldset>
      <legend>Question #82</legend>
      <p>Using radio buttons that share the same name attribute ensures that only one of them can be checked</p>
      <label>True
        <input type='radio' name='Q82' value='true'>
      </label>
      <label>False
        <input type='radio' name='Q82' value='false'>
      </label>
    </fieldset>
    <fieldset>
      <legend>Question #83</legend>
      <p>If you wish to set a default, use the checked attribute. ex. checked='false' (see the radio buttons below)</p>
      <label>True
        <input type='radio' name='Q83' value='true'>
      </label>
      <label>False
        <input type='radio' name='Q83' value='false' checked='true'>
      </label>
    </fieldset>
    <input type='submit'>
  </form>
</body>

</html>