Question

您好我在修复此问题时遇到了问题。我有4个复选框，其中一次只能选中一个复选框。这意味着如果当前检查了第二个框并且我勾选了第一个框，那么应该删除第二个框的检查。

我的问题是，当我勾选一个复选框时，我无法再检查其下方的其他复选框。我需要先取消选中该框，然后才能恢复功能。

这是我的javascript

var a = $('.8kfth').val();
        $(':checkbox').on('click', this, function(){
            if ($('.8kfirstchk').prop('checked')==true && $('.8kfth').val()=="one")
            {
                $('.8ksecondchk, .8kthirdchk, .8kfourthchk').prop('checked', false);
                $('.ft-identifier').html('').append('8-K with 425');
            }
            else if ($('.8ksecondchk').prop('checked')==true && $('.8kfth').val()=="one")
            {
                $('.8kfirstchk, .8kthirdchk, .8kfourthchk').prop('checked', false);
                $('.ft-identifier').html('').append('8-K with DEFA14A or DFAN14A');
            }
            else if ($('.8kthirdchk').prop('checked')==true && $('.8kfth').val()=="one")
            {
                $('.8kfirstchk, .8ksecondchk, .8kfourthchk').prop('checked', false);
                $('.ft-identifier').html('').append('8-K with SC TO-C');
            }
            else if ($('.8kfourthchk').prop('checked')==true && $('.8kfth').val()=="one")
            {
                $('.8kfirstchk, .8ksecondchk, .8kthirdchk').prop('checked', false);
                $('.ft-identifier').html('').append('8-K with SC TO-C');
            }
        });

这里是html

<P align=center><select class="8kfth"><option></option><option><value="one">one</option><option value="two">two</option></select></P>

<TABLE style="LINE-HEIGHT: 13pt; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 width="100%" border=0>

<TR vAlign=bottom>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman"><input type="checkbox" class="8kfirstchk">&nbsp;&nbsp;</FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"><FONT face="Times New Roman" size=2>425</FONT></TD></TR>
<TR>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman">&nbsp;&nbsp;</FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"></TD></TR>
<TR vAlign=bottom>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman"><input type="checkbox" class="8ksecondchk"></FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"><FONT face="Times New Roman" size=2>PANDA</FONT></TD></TR>
<TR>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman">&nbsp;&nbsp;</FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"></TD></TR>
<TR vAlign=bottom>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman"><input type="checkbox"  class="8kthirdchk"></FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"><FONT face="Times New Roman" size=2>SCIENCE TO SCIENCE</FONT></TD></TR>
<TR>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman">&nbsp;&nbsp;</FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"></TD></TR>
<TR vAlign=bottom>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman"><input type="checkbox"  class="8kfourthchk"></FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"><FONT face="Times New Roman" size=2>SCIENCE TO SCIENCE</FONT></TD></TR></TABLE>

这是一个小提琴如果有帮助https://jsfiddle.net/yguch1yb/ （请注意，您需要在下拉列表中选择一个以解决我的问题）

Answer 1

这将允许您创建可以使用数字指定的复选框组。因此，在您定义它们时，这一个代码将应用于多个组。此外，这只会验证给定组中的唯一值是您选择的最后一个值。

＆＃13;

$('input[data-checkGroup]').on('click',function(){
  let item = this;
  let group = $(this).attr('data-checkGroup');
  let checked = $('[data-checkGroup="'+group+'"]:checked');
  $.each(checked,function(k,v){
    if(v !== item) v.checked = false;
  });
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" data-checkGroup="1"> Value 1<br/>
<input type="checkbox" data-checkGroup="1"> Value 2<br/>
<input type="checkbox" data-checkGroup="1"> Value 3<br/>
<input type="checkbox" data-checkGroup="1"> Value 4

<br/>

<span class="log"></span>

＆＃13;

选中复选框复选框无法选中

1 个答案: