Question

Codes here

<form onclick="sa();">
<div id="rates">
<input type="radio" id="r1" name="rate" value="0"> X1
<input type="radio" id="r2" name="rate" value="1"> X2
<input type="radio" id="r3" name="rate" value="2"> X3
</div>
</form>

当我单击任何单选按钮X1 X2或X3时，应该调用sa（），将限制从3更改为2.（警报窗口用于测试使用。）然后使用限制来限制下部选中的复选框数量。但是当我点击按钮时，该功能不起作用;没有警告窗口弹出，我仍然可以选择3个盒子。

我想问的另一个问题是：如果用户检查了一些盒子，但是然后他/她返回到X按钮并选择另一个，我希望所有盒子都未选中并且他/她需要检查它们再次。这是什么代码？只需将取消选中功能添加到onclick？

Answer 1

该函数正在加载处理程序中定义，因此位于不同的范围

Inline event handler not working in JSFiddle

limit = 3;

function sa() { //var rates = document.getElementsByName('rate');
  limit = 2;
  window.alert(limit);
  //if (rates[1].checked) {limit=1;}
  //else if (rates[2].checked) {limit=2;}
  //else if (rates[3].checked) {limit=3;}
  //else {limit=2;}
}
$('form').on('click', function(evt) {
  sa();
});


$('input.single-checkbox').on('change', function(evt) {
  if ($(this).siblings(':checked').length >= limit) {
    this.checked = false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <p><strong>No:</strong></p>
  <input type="radio" name="no" value="0" checked> Unrestricted
  <input type="radio" name="no" value=1> 1
  <input type="radio" name="no" value=2> 2
  <input type="radio" name="no" value=3> 3
  <input type="radio" name="no" value=4> 4 or more
</form>

<form>
  <div id="rates">
    <input type="radio" id="r1" name="rate" value="0"> X1
    <input type="radio" id="r2" name="rate" value="1"> X2
    <input type="radio" id="r3" name="rate" value="2"> X3
  </div>
</form>

<div class="pricing-levels-3">
  <p><strong>Must include:</strong></p>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> A
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> B
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> C
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> D
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> E
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> F
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> G
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> H
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> I
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> J
</div>

Onclick功能无法使用单选按钮

1 个答案: