javascript - 复选框的行为类似于Radiobox JavaScript(Checkbox behave like radiobox javascript)

Question

I have a table that is dynamically created based on a number that is selected by a user from a dropdown.(我有一个表是根据用户从下拉列表中选择的数字动态创建的。)

The table consists of 3 checkboxes.(该表包含3个复选框。) The maximum number of checkboxes that can be checked per row is 2.(每行最多可以选中2个复选框。) Checkbox 2 and 3 behave like radio buttons (I know it would make my life easier to use just radio buttons but then the table doesn't look right as there is one checkbox and 2 radio buttons).(复选框2和3的行为类似于单选按钮（我知道仅使用单选按钮将使我的生活更轻松，但由于有一个复选框和2个单选按钮，因此表格看起来不正确）。) If 2 is selected and then the user clicks on 3, then 2 would become unchecked.(如果选择2，然后用户单击3，则2将变为未选中状态。) I found this script here: http://jsfiddle.net/44Zfv/724/ which works perfectly but when I try to integrate it into my project it doesn't work.(我在这里找到了该脚本： http : //jsfiddle.net/44Zfv/724/ ，它可以正常工作，但是当我尝试将其集成到我的项目中时，它将无法正常工作。) I have created a fiddle here: https://jsfiddle.net/pcqravwj/1/ This demonstates the scenario.(我在这里创建了一个小提琴： https : //jsfiddle.net/pcqravwj/1/这演示了这种情况。) As you will see the checkboxes on row 0 are not dynamically created and both checkboxes cannot be checked.(如您将看到的，第0行的复选框不是动态创建的，并且两个复选框都不能选中。) I have added the class .cbh to my dynamically created checkboxes on row 1. However, all 3 checkboxes can be checked but I do notice that if a checkbox in row 0 is checked it clears the checkboxes which have the same class in row 1.(我已将类.cbh添加到第1行的动态创建的复选框中。但是，可以选中所有3个复选框，但是我确实注意到，如果选中了第0行中的复选框，它将清除第1行中具有相同类的复选框。) This is the piece of code I am using to try and control the checkbox behavouir(这是我用来尝试控制复选框行为的代码段) $(".chb").prop('checked', false); $(this).prop('checked', true); console.log("test3") }); I just wondered if anyone could help me figure out what is happening here.(我只是想知道是否有人可以帮助我弄清楚这里发生了什么。) As a newbie, the script looks like it should work and I am struggling to find the mistake.(作为一个新手，该脚本看起来应该可以工作，而我正在努力寻找错误。) Your help would be greatly appreciated.(您的帮助将不胜感激。) Thanks!(谢谢！)   ask by Jaffa translate from so

Answer 1

You can create custom checkboxes with CSS as well) With hidden radio-buttons.(您也可以使用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>