Question

在HTML表单中，我们有三个用于三个类的单选按钮集，例如

Class 1
<input id="Level1" name="Classl" type="radio" value="Level1" />Level 1<br>
<input id="Level2" name="Classl" type="radio" value="Level2" />Level 2<br>
<input id="Level3" name="Classl" type="radio" value="Level3" />Level 3<br>
Class 2
<input id="Level1" name="Class2" type="radio" value="Level1" />Level 1<br>
<input id="Level2" name="Class2" type="radio" value="Level2" />Level 2<br>
<input id="Level3" name="Class2" type="radio" value="Level3" />Level 3<br>
Class 3
<input id="Level1" name="Class3" type="radio" value="Level1" />Level 1<br>
<input id="Level2" name="Class3" type="radio" value="Level2" />Level 2<br>
<input id="Level3" name="Class3" type="radio" value="Level3" />Level 3<br>
<input id="Level4" name="Class3" type="radio" value="Level4" />Level 4<br>

此时，用户可以从每个收音机中选择一个。我们希望他们从所有这些按钮中只选择一个单选按钮。它的意思是，用户只能从三个类中选择一个级别。

请提出建议，可能是Javascript / JQuery。

Answer 1

我们无法为所有人提供相同的名称，因为我们也希望跟踪班级选择

然后类选择应该是值的一部分。

<label>
  <input id="Level1" name="Class" type="radio" value="Classl-Level1" />
  Level 1
</label>

Answer 2

试试这个;）

$(function(){
  $('input[type="radio"].classOnly').on('change', function(){
    $('input[type="radio"].classOnly:checked').not(this).attr('checked', false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Class 1
<input id="Level1" name="Classl" type="radio" class="classOnly" value="Level1" />Level 1<br>
<input id="Level2" name="Classl" type="radio" class="classOnly" value="Level2" />Level 2<br>
<input id="Level3" name="Classl" type="radio" class="classOnly" value="Level3" />Level 3<br>
Class 2
<input id="Level1" name="Class2" type="radio" class="classOnly" value="Level1" />Level 1<br>
<input id="Level2" name="Class2" type="radio" class="classOnly" value="Level2" />Level 2<br>
<input id="Level3" name="Class2" type="radio" class="classOnly" value="Level3" />Level 3<br>
Class 3
<input id="Level1" name="Class3" type="radio" class="classOnly" value="Level1" />Level 1<br>
<input id="Level2" name="Class3" type="radio" class="classOnly" value="Level2" />Level 2<br>
<input id="Level3" name="Class3" type="radio" class="classOnly" value="Level3" />Level 3<br>
<input id="Level4" name="Class3" type="radio" class="classOnly" value="Level4" />Level 4<br>

Answer 3

试试这个，我建议不要多次使用相同的id，而是使用class。

＆＃13;

$('.radioCollection').find('input:radio').on('click', function() {

  $('.radioCollection').find('input:radio').not($(this)).attr('checked', false);

  //you can remove below code

  var mainId = $(this).closest('.radioCollection').attr('id'); // class1 || class2 || class3

  var log = '';
  if ($(this).hasClass('Level1')) {
    //Level1
    log = 'Level1';

  } else if ($(this).hasClass('Level2')) {
    //Level2
    log = 'Level2';
  } else if ($(this).hasClass('Level3')) {
    //Level3
    log = 'Level3';
  } else if ($(this).hasClass('Level4')) {
    //Level4
    log = 'Level4';
  }

  $('.tempLog')
    .html('Selected Main Class: <span>' + mainId + '</span><br/> Selected Radio Class: <span>' + log + '</span>');
})

＆＃13;

.tempLog {
  padding: 10px;
  background: #eee;
  margin: 5px 0;
  color: #888;
}
.tempLog span {
  color: #000;
  font-weight: 800;
}
input:radio {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tempLog"></div>

Class 1
<div id="class1" class="radioCollection">
  <input class="Level1" name="Classl" type="radio" value="Level1" />Level 1
  <br>
  <input class="Level2" name="Classl" type="radio" value="Level2" />Level 2
  <br>
  <input class="Level3" name="Classl" type="radio" value="Level3" />Level 3
  <br>
</div>
Class 2
<div id="class2" class="radioCollection">
  <input class="Level1" name="Class2" type="radio" value="Level1" />Level 1
  <br>
  <input class="Level2" name="Class2" type="radio" value="Level2" />Level 2
  <br>
  <input class="Level3" name="Class2" type="radio" value="Level3" />Level 3
</div>
<br>Class 3

<div id="class3" class="radioCollection">
  <input class="Level1" name="Class3" type="radio" value="Level1" />Level 1
  <br>
  <input class="Level2" name="Class3" type="radio" value="Level2" />Level 2
  <br>
  <input class="Level3" name="Class3" type="radio" value="Level3" />Level 3
  <br>
  <input class="Level4" name="Class3" type="radio" value="Level4" />Level 4</div>
<br>

＆＃13;

希望这会有所帮助.. :)

HTML表单，只从三个收音机中选择一个单选按钮

3 个答案: