Question

如何最好地将每个复选框的结果放在文本下方？选择CheckBox将显示value中的结果，该结果显示在右侧，就像下面显示的那样？

$('input[type=checkbox]').on('change', function() {
  var val = this.checked ? this.value : "";
  $(this).parent().next(".hello").text(val);
});

body {
  padding: 15px;
}
    
.hello {
  width:380px;
  font: 11px Arial, sans-serif;
  color: green;
  padding-left:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>checkboxes</th>
    <th>Values</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name='cbox' value="red" class="theClass" />red
    </td>
    <td class="hello"></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name='cbox2' value="green" class="theClass" />green
    </td>
    <td class="hello"></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name='cbox3' value="blue" class="theClass" />blue
      <p></p>
    </td>
    <td class="hello"></td>
  </tr>

</table>

Answer 1

我认为您不需要第二列，只需要一列，因此响应将显示在复选框文本下方。这样您就可以根据需要设置样式...

$('input[type=checkbox]').on('change', function() {
  var val = this.checked ? "<br> &nbsp;&nbsp;&nbsp;&nbsp;" +  this.value : "";
  $(this).next(".hello2").html(val);
});

body {
  padding: 15px;
}
    
.hello2 {
  width:380px;
  font: 11px Arial, sans-serif;
  color: green;
  padding-left:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>checkboxes</th>
    <th>Values</th>
  </tr>
  <tr>
    <td>
    <input type="checkbox" name='cbox1' value="red" class="theClass" />red<span class="hello2"></span>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name='cbox2' value="green" class="theClass" />green<span class="hello2"></span>
    </td>
  </tr>
  <tr>
  <td>
   <input type="checkbox" name='cbox3' value="blue" class="theClass" />blue<span class="hello2"></span>
    </td>
  </tr>

</table>

Answer 2

您的问题不是很清楚。因此，我真的不明白您希望值显示在哪里。话虽如此，这显示了根据要求在“复选框”下的“值”。

$('input[type=checkbox]').on('change', function() {
  var val = this.checked ? this.value : "";
  $(this).parent().next(".hello").text(val);
});

body {
  padding: 15px;
}
    
.hello {
  width:380px;
  font: 11px Arial, sans-serif;
  color: green;
  padding-left:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>checkboxes</th>
    <th>Values</th>
  </tr>
  <tr>
    <td>
      <label><input type="checkbox" name='cbox' value="red" class="theClass" />red</label>
      <div class="hello"></div>
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <label><input type="checkbox" name='cbox2' value="green" class="theClass" />green</label>
      <div class="hello"></div>
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <label><input type="checkbox" name='cbox3' value="blue" class="theClass" />blue</label>
      <div class="hello"></div>
    </td>
    <td></td>
</tr>

</table>

输入以下结果

2 个答案: