Question

我有多个CSS自定义的复选框。使用该功能，可以同时选择一个，如无线电。我在onchange事件中使用切换来影响复选框中的所有更改。

<input type="checkbox" name="plus" onchange="toggleByClass('masinfo1');" class="plusultra" id="checkmas1" value=""><label for="checkmas1"><span></span></label>
<input type="checkbox" name="plus" onchange="toggleByClass('masinfo2');" class="plusultra" id="checkmas2" value=""><label for="checkmas2"><span></span></label>
<input type="checkbox" name="plus" onchange="toggleByClass('masinfo3');" class="plusultra" id="checkmas3" value=""><label for="checkmas3"><span></span></label>

div：

<div class="masinfo1 divmasinfo" id="masinfo1"><p class="infop">1111 11111 111111 11111 1111 1111</p></div>
<div class="masinfo2 divmasinfo" id="masinfo2"><p class="infop">222222 222 222 22222222222</p></div>
<div class="masinfo3 divmasinfo" id="masinfo3"><p class="infop">33333 3333 333 3333 33</p></div>

功能切换：

function toggleByClass(className) {
 $("."+className).toggle();}

只检查了一个功能：

    `$`( document ).ready(function() {
 `$`(function() {
    $("input:checkbox").on('click', function() {
      var $box = $(this);
      if ($box.is(":checked")) {
        var group = "input:checkbox[name='" + $box.attr("name") + "']";
           $(group).prop("checked", false);
        $box.prop("checked", true);
      } else {
        $box.prop("checked", false);
      }
    });
  });

});

当我点击另一个复选框时，问题是onchange不关闭div，我不明白为什么。有人能帮助我吗？

Answer 1

您应该在切换前隐藏显示的div。请尝试使用此toggleByClass函数。它在切换之前隐藏已经显示的div。

function toggleByClass(className) {
    $(".divmasinfo").each(function(index, item) {
        if(!$(item).is("." + className)) {
            $(item).hide();
        }
    });
    $("." + className).toggle();
}

打开切换的多个复选框对每个复选框进行划分。只能同时选择一个

1 个答案: