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

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检查每行是否已检查输入。

＆＃13;

＆＃13;

$('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))
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

Answer 3

试试希望它有所帮助！

# set wd to work with relative path ./
setwd("C:/Users/Desktop/Data Generation/")

# get the list of all directories:
dirList = NULL
for (d in list.dirs(path = ".", full.names=TRUE, recursive=TRUE)){
  dirList = rbind(dirList, d)
}

# create the directories tree in ./NA/ 
for (d in dirList){
  dir.create(paste0('NA',gsub("\\.", "", d)), recursive = TRUE)
}

# process files and save with full path to ./NA/
for (f in dir(path = ".", pattern = '*\\.dat$', full.names=TRUE, recursive=TRUE)){
  data <- read.table(f, header=TRUE)
  data <- fix_missing(data)
  write.table(data, paste0('NA',gsub("\\./", "/", f)), 
              sep="\t", row.names = FALSE, col.names = FALSE)
  rm(data)
}

Answer 4

"""myapp URL Configuration
"""
from django.conf.urls import url
from django.contrib import admin
from myapp import views
from django.contrib.auth import views as auth_views

urlpatterns = [
    url(r'^admin/', admin.site.urls, name='admin'),
    url(r'^helloworld/', views.helloworld, name='Hello World!'),
    url(r'^login/$', auth_views.login, name='login'),
    url(r'^logout/$', auth_views.logout, name='logout')
]

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

Answer 5

您可以使用onchange事件并使用$(this)

获取当前输入ID和值

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

    });

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

$( 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() ); 

  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;