在帖子中获取btn-group-toggle值

时间:2018-04-11 11:35:57

标签: javascript twitter-bootstrap-4

有没有一种很好的方法来获得btn-group-toggle的价值 POST请求中的示例如下。现在,当我尝试在请求中访问它时,由于某种原因,我得到了值',当我点击不同的按钮时它不会改变

img {
  height: 200px;
  width: 200px;
  margin: 10px;
}

brn-group {
  overflow-y: scroll;
}

[type='radio'] {
  display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<form mthod='post'>
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <ul>
      <li class="btn btn-light active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked>
        <img src="https://www.gravatar.com/avatar/75550aaf5b7db5eba2283ac3171b05ea?s=256&d=identicon&r=PG&f=1" alt="" width="24" height="24" class="-avatar js-avatar-me">
      </li>
      <li class="btn btn-light">
        <input type="radio" name="options" id="option2" autocomplete="off">
        <img src="https://www.gravatar.com/avatar/75550aaf5b7db5ega2283ac3171b05ea?s=256&d=identicon&r=PG&f=1" alt="" width="24" height="24" class="-avatar js-avatar-me">
      </li>
      <li class="btn btn-light">
        <input type="radio" name="options" id="option3" autocomplete="off">
        <img src="https://www.gravatar.com/avatar/735550aaf5b7db5eba2283ac3171b05ea?s=256&d=identicon&r=PG&f=1" alt="" width="24" height="24" class="-avatar js-avatar-me">
      </li>
      <li class="btn btn-light">
        <input type="radio" name="options" id="option4" autocomplete="off">
        <img src="https://www.gravatar.com/avatar/735550aaf5b7db5eba2283ac3171b05ea?s=256&d=identicon&r=PG&f=1" alt="" width="24" height="24" class="-avatar js-avatar-me">
      </li>
      <li class="btn btn-light">
        <input type="radio" name="options" id="option5" autocomplete="off">
        <img src="https://www.gravatar.com/avatar/735550aaf5b7db5eba2283ac3171b05ea?s=256&d=identicon&r=PG&f=1" alt="" width="24" height="24" class="-avatar js-avatar-me">
      </li>
      <li class="btn btn-light">
        <input type="radio" name="options" id="option6" autocomplete="off">
        <img src="https://www.gravatar.com/avatar/735550aaf5b7db5eba2283ac3171b05ea?s=256&d=identicon&r=PG&f=1" alt="" width="24" height="24" class="-avatar js-avatar-me">
      </li>
    </ul>
  </div>
  <input type='submit'>
</form>

0 个答案:

没有答案