Question

我的html中有4个收音机。用户必须选择3个收音机。我知道如何获得1个收音机的价值。但是如果选择的无线电值为3无线电，我将不知道该怎么做。

lib

JS

<div class="radio"  data-value="A" />
<div class="radio"  data-value="B" />
<div class="radio"  data-value="C" />
<div class="radio"  data-value="D" />

Answer 1

根据维基百科中的定义

单选按钮或选项按钮是图形控制元素，允许用户选择预定义的一组互斥选项中的仅一个。

复选框（复选框，复选框，复选框）是GUI小部件，允许用户做出二进制选择，即在两个可能的互斥选项之一之间进行选择。

因此，如果必须选择3个选项，则必须使用复选框而不是单选按钮。

这是复选框的简单示例。希望对您有所帮助。

$('input').click(function () {
    var checked  = $('input:checked');
    checked.each((index, itm) => {
      console.log(itm.value);
    });
    console.log('-----------');
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
<input type="checkbox" name="vehicle3" value="Boat"> I have a boat<br>
<input type="checkbox" name="vehicle3" value="plane"> I have a plane<br>

更新

使用div元素，您应该创建一个选定项目的数组。像这样：

var selectedArr = [];

$('.radio').click(function() {
  var type = $(this).attr('data-value');
  var index = selectedArr.findIndex(a => {
    return a == type;
  });
  if(index == -1) {
    selectedArr.push(type);
    console.log('item added');
  }
  else {
    selectedArr.splice(index, 1);
    console.log('item removed');
  }
  console.log(selectedArr);
  console.log('---------------------');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio" data-value="A"> A </div>
<div class="radio" data-value="B"> B </div>
<div class="radio" data-value="C"> C </div>
<div class="radio" data-value="D"> D </div>

更新2

var var1, var2, var3, var4;

$('.radio').click(function() {
  var type = $(this).attr('data-value');
  var flag = checkVal(var1, type);
  (flag)? (flag == 1)? var1 = type : var1 = undefined : '';
  if(flag) return logger();
  
  flag = checkVal(var2, type);
  (flag)? (flag == 1)? var2 = type : var2 = undefined : '';
  if(flag) return logger();
  
  flag = checkVal(var3, type);
  (flag)? (flag == 1)? var3 = type : var3 = undefined : '';
  if(flag) return logger();
  
  flag = checkVal(var4, type);
  (flag)? (flag == 1)? var4 = type : var4 = undefined : '';
  if(flag) return logger();
});

function logger () {
  console.log({
      'var1': var1,
      'var2': var2,
      'var3': var3,
      'var4': var4
    });
}

function checkVal(x, y) {
  if (x) {
    if (x == y) {
      return -1;
    } else {
      return 0;
    }
  } else {
    return 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio" data-value="A"> A </div>
<div class="radio" data-value="B"> B </div>
<div class="radio" data-value="C"> C </div>
<div class="radio" data-value="D"> D </div>

Answer 2

$('.radio').click(function(){
var value = []; // initialize empty array 
       $(".radio:checked").each(function(){
        value.push($(this).val());
        }); 
       alert(value);

       });

<input type="radio" class="radio"  value="A" />
<input type="radio" class="radio"  value="B" />
<input type="radio" class="radio"  value="C" />
<input type="radio" class="radio"  value="D" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

获得所选收音机的3个值| JS

2 个答案: