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

Question

我有一个基于用户从下拉列表中选择的数字动态创建的表。 该表包含 3 个复选框。 每行最多可勾选 2 个复选框。

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

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

我在这里创建了一个小提琴： 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>

Answer 2

您需要在刷新中更新处理程序，以便将它们应用于所有复选框，因此：

$(".chb").change(function () {
    $(".chb").prop('checked', false);
    $(this).prop('checked', true);

也应该出现在刷新函数的末尾，但是元素的类匹配将应用于具有给定类的所有复选框，因此（如果我没有误解您的意图），您应该为每一行应用不同的类。