Question

我遇到了一个问题，当我有200个复选框时，我可以选择200个复选框中的一个，然后所有chekbox都被“选中”，但我需要它带单选按钮并且不适合我

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img src="https://www.w3schools.com/jquery/img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213"><br>
<input type="checkbox" name="aa" id="te" onclick="alertsm()"><br>
<input type="checkbox" name="bb" class="qq"><br>
<input type="checkbox" name="bb" class="qq"><br>
<input type="checkbox" name="bb" class="qq"><br>
<input type="checkbox" name="bb" class="qq"><br>
<input type="checkbox" name="bb" class="qq"><br>
<input type="checkbox" name="bb" class="qq"><br>
<script>
function alertsm(){
    if($("#te").is(':checked')){
        $('.qq').prop("checked", true);
    }else{
        $('.qq').prop("checked", false);

    }
}
</script>
</body>
</html>

这是我的复选框代码，

source code

Answer 1

我找到了解决方案

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

  <img src="https://www.w3schools.com/jquery/img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213"><br>

  <input class="sel" type="radio" value="" name="">Selector<br>
  <input class="qq" type="checkbox" value="" name="a"><br>
  <input class="qq" type="checkbox" value="" name="a"><br>
  <input class="qq" type="checkbox" value="" name="a"><br>


  <script>
    var x=0;


    $( ".sel" ).click(function() {
      if (x==0) {
        x=1;
        alertsm();
      }else{
        x=0;
        alertsm();
      }
    });

    $(".qq").change(function(){
      if ($('.qq:checked').length == $('.qq').length) {
        $('.sel').prop("checked", true);
      } else {
        $('.sel').prop("checked", false);
      }
    });

    function alertsm(){
      if (x==1) {
        $('.qq').prop("checked", true);
      } else {
        if (x==0) {
          $('.qq').prop("checked", false);
          $('.sel').prop("checked", false);
        }
      }
    }


  </script>
</body>
</html>

＆＃13;

如果您想使用单选按钮更改菜单，只需将type的{{1}}更改为无线电。应该是这样的

class="qq"

这里我将解释逻辑，看看这个JQuery：

<input class="qq" type="radio" value="" name=""><br>

主要查询的逻辑：

点击$( ".sel" ).click(function() { if (x==0) { x=1; alertsm(); }else{ x=0; alertsm(); } });后，它会检查x的值。
因为x的值是0（默认情况下将var x声明为0时设置），它将为x赋值1
然后它将运行你的alertsm（）函数。

其他查询

此查询的主要功能是：检查是否已选中或取消选中所有复选框。

class="sel"

查询逻辑

如果选中所有复选框，请将$(".qq").change(function(){ if ($('.qq:checked').length == $('.qq').length) { $('.sel').prop("checked", true); } else { $('.sel').prop("checked", false); } });的状态设置为已选中
否则，class="sel"的状态将设置为未选中状态。

试试并随意提问！

我有很多单选按钮（超过200个）

1 个答案: