Question

我正在构建此checkbox，如果网络上的所有3个复选框都是checked，那么它只会起作用。否则它会失败。

我试图在没有value的情况下进行设置 - 但它根本不起作用。

我试图给它们与名称或字段相同的value - 不起作用。

仅当value设置为true时才有效 - 但出于某种原因，它预计全部为true？

＆＃13;

<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>

＆＃13;

Answer 1

在<input>类型checkbox中，您将checked属性设置为true，而不是value：

<input id="2-b" name="MX3B" type="checkbox" class="checkbox-button-input" checked="true">
                                                                             ▲

Answer 2

更新

演示2是单选按钮对的示例，其中包含提交给服务器的true和false字符串的值。

似乎每个人都假设您希望默认选中复选框。虽然我可能弄错了，但我不能这样解释。我收集的是，如果选中所有复选框，那么您只会提交一个值，这是奇怪的。作为测试，我将未修改的代码放在<form>内并添加了<input type='submit'>按钮，然后将<form>发布到测试服务器。它只会发送按预期检查的复选框的值。

演示1 - PLUNKER

演示1 - 堆叠（由于SO安全措施而无法运行，请参阅PLUNKER for a functioning example）

＆＃13;

<!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>

＆＃13;

演示2 - PLUNKER

演示2 - 堆叠（参见PLUNKER for working example）

＆＃13;

<!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>

＆＃13;

Answer 3

<input id="2-a" name="MX3A" type="checkbox" class="checkbox-button-input" checked>

如果未选中，复选框值将失败？

3 个答案:

更新