javascript - 检查组中的单选按钮是否已被选中

Question

我有一个分组单选按钮列表，组中的每个单选按钮都有一个如下所示的属性名称:page-x-layout，其中x是变量。

我的 html 代码看起来像这样:

<div class="row">
    <div class="col-md-3">
        <input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
    </div>
    <div class="col-md-3">
        <input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
    </div>
    <div class="col-md-3">
        <input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
    </div>
    <div class="col-md-3">
        <input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        <input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
    </div>
    <div class="col-md-3">
        <input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
    </div>
    <div class="col-md-3">
        <input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
    </div>
    <div class="col-md-3">
        <input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        <input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
    </div>
    <div class="col-md-3">
        <input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
    </div>
    <div class="col-md-3">
        <input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
    </div>
    <div class="col-md-3">
        <input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
    </div>
</div>

所以我想做的是检查每个组中是否选中了单选按钮。

我怎样才能做到这一点？

Answer 1

您可以将所有输入从行映射到数组，然后使用 every 检查每行是否已检查输入。

$('input').change(function() {
  var check = $('.row').map(function(e) {
    return $(this).find('input[type="radio"]').is(':checked')
  }).get()

  console.log(check.every(e => e == true))
})

.row {
  border: 1px solid black;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3">
    <input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
  </div>
  <div class="col-md-3">
    <input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
  </div>
  <div class="col-md-3">
    <input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
  </div>
  <div class="col-md-3">
    <input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
  </div>
</div>

<div class="row">
  <div class="col-md-3">
    <input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
  </div>
  <div class="col-md-3">
    <input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
  </div>
  <div class="col-md-3">
    <input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
  </div>
  <div class="col-md-3">
    <input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
  </div>
</div>

<div class="row">
  <div class="col-md-3">
    <input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
  </div>
  <div class="col-md-3">
    <input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
  </div>
  <div class="col-md-3">
    <input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
  </div>
  <div class="col-md-3">
    <input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
  </div>
</div>