检查组中的单选按钮是否已被选中答案

【问题标题】：Check if radio button in a group has been checked检查组中的单选按钮是否已被选中
【发布时间】：2017-02-15 20:41:12
【问题描述】：

我有一个分组单选按钮列表，组中的每个单选按钮都有一个这样的属性名称：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>

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

我该怎么做？

【问题讨论】：

你试过什么？你遇到了什么问题？请出示您的代码。
这是怎么被这么多赞成的，它是题外话，因为它太宽泛了，从下面的众多答案中可以看出

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案2】：

试试这个希望它有帮助！

$('#element').click(function() { 
  if($('#radio_button').is(':checked')) {
       alert("it's checked"); }
    });

【讨论】：

这在我的情况下不起作用，因为如果我只在一组中选择了一个单选按钮，它总是会提醒该消息
您只想检查一下，对吗？每次选中一个组中的单选按钮时，您都需要一条警报消息！

【解决方案3】：

if (!$("input[name='html_elements']:checked").val()) {
  alert('Nothing is checked!');
}
else {
  alert('One of the radio buttons is checked!');
}

Using JQuery to check if no radio button in a group has been checked

【讨论】：

【解决方案4】：

您可以使用onchange 事件来获取当前输入ID 和使用$(this) 的值

$('[type~="radio"]').on('change', function() {
    alert("ID = " + $(this).attr('id').split(' ') + "  Value =" +$(this).val() ); 

    });

$('[type~="radio"]').on('change', function() {
  alert("ID = " + $(this).attr('id').split(' ') + "  Value =" +$(this).val() ); 

});

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

或者如果您需要加载所有值，请使用.each() 获取所有值

$( document ).ready(function() {
  $allradio = '';
  $('[type~="radio"]').each(function() {
  $allradio = $allradio + "ID = " + $(this).attr('id').split(' ') + "  Value =" +$(this).val()+'\n';
  });
  alert($allradio);
  $('[type~="radio"]').on('change', function() {
    alert("ID = " + $(this).attr('id').split(' ') + "  Value =" +$(this).val() ); 

  });
});

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

【讨论】：

这只会在我检查一些单选按钮时，我想知道是否检查了单选按钮或根据他们的名字命名，因为我想检查这些单选按钮是否被选中，即使用户没有检查任何东西

【解决方案5】：

您可以对每个 Radiobutton 使用此代码：

  if(document.getElementById('page-x-layout').checked) {
      //do something if radio button is checked
    }

【讨论】：

我不敢说这行不通，因为page-x-layout 中的x 总是可变的，所以在html 中你可以找到page-1-layout 和page-44-layout ...跨度>