javascript - 复选框的行为类似于单选框 javascript

Question

我有一个根据用户从下拉列表中选择的数字动态创建的表。该表由 3 个复选框组成。每行最多可以检查 2 个复选框。

复选框 2 和 3 的行为类似于单选按钮(我知道仅使用单选按钮会让我的生活更轻松，但表格看起来不正确，因为有一个复选框和 2 个单选按钮)。如果选择 2，然后用户单击 3，则 2 将变为未选中状态。

我在这里找到了这个脚本:http://jsfiddle.net/44Zfv/724/它工作得很好，但是当我尝试将它集成到我的项目中时，它不起作用。

我在这里创建了一个 fiddle :https://jsfiddle.net/pcqravwj/1/这演示了该场景。正如您将看到的，第 0 行上的复选框不是动态创建的，并且两个复选框都无法选中。我已将类 .cbh 添加到第 1 行动态创建的复选框中。但是，可以选中所有 3 个复选框，但我确实注意到，如果选中第 0 行中的复选框，则会清除第 1 行中具有相同类的复选框。

这是我用来尝试控制复选框行为的代码

            $(".chb").prop('checked', false);
            $(this).prop('checked', true);
            console.log("test3")
        });

我只是想知道是否有人可以帮我弄清楚这里发生了什么。作为新手，该脚本看起来应该可以工作，但我正在努力寻找错误。

我们将非常感谢您的帮助。

谢谢!

Answer 1

您也可以使用 CSS 创建自定义复选框)以及隐藏的单选按钮。

var counter = 0;
$('.cb[type="radio"]').each(function( index ){
  $(this).attr('name', 'rad-' + counter );
  if( index % 2 ) counter++;
}); // only auto-naming with JS, for demo.

.block { border: 2px solid orange; margin: 5px; padding: 5px; }

.cb { display: none; }

label {
  display: inline-block;
  width: 100px;
  box-shadow: 1px 1px 3px #666;
  padding: 5px; margin: 5px;
  cursor: pointer;
  user-select: none;
}

label:hover { background-color: #fff1ba; }

.box {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  background-color: #ddd;
  cursor: pointer;
}

.cb:checked ~ .box::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 4px;
  width: 7px;
  height: 13px;
  transform: rotate(40deg);
  border-right: 2px solid #045acf;
  border-bottom: 2px solid #045acf;  
}
.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block">
  <label><input class="cb" type="checkbox"><span class="box"></span> Test</label>
  <label><input class="cb" type="radio"><span class="box"></span> Test</label>
  <label><input class="cb" type="radio"><span class="box"></span> Test</label>
</div>

<div class="block">
  <label><input class="cb" type="checkbox"><span class="box"></span> Test</label>
  <label><input class="cb" type="radio"><span class="box"></span> Test</label>
  <label><input class="cb" type="radio"><span class="box"></span> Test</label>
</div>

<div class="block">
  <label><input class="cb" type="checkbox"><span class="box"></span> Test</label>
  <label><input class="cb" type="radio"><span class="box"></span> Test</label>
  <label><input class="cb" type="radio"><span class="box"></span> Test</label>
</div>