Javascript 如果选中多个复选框，如何显示隐藏按钮

我有两个按钮添加和分组。最初，组按钮是隐藏的。“添加”按钮用于创建记录

例如： 创建5条记录时（按5次添加按钮）。现在，如果用户选择多个

复选框，则应显示隐藏组按钮。有人能告诉我怎么做吗

请看这个

我使用的是
bootstrap css
，为了隐藏，我做的如下

<input type="button" id="btn2" class="btn btn-lg btn-primary hide" value="Group">



更新
仅当用户输入某些记录时，才会出现复选框。填写表格并按下“添加”按钮后，请参见此

看到这个了吗

在复选框的
change
事件中添加复选框。下面是一个例子：

$(document).on('change','#mytable input:checkbox',function () {
    if(!this.checked)
    {
        key=$(this).attr('name').replace('mytr','');
        alert(key);
        obj[key]=null;
    }

    //updated using your bootstrap class to show/hide
    if($('#mytable input:checkbox:checked').length > 1) {
        $('#btn2').removeClass('hide');
    } else {
        $('#btn2').addClass('hide');
    }

});

已更新以根据更新的问题使用引导类。
在
更改事件中为复选框添加复选框。下面是一个例子：

$(document).on('change','#mytable input:checkbox',function () {
    if(!this.checked)
    {
        key=$(this).attr('name').replace('mytr','');
        alert(key);
        obj[key]=null;
    }

    //updated using your bootstrap class to show/hide
    if($('#mytable input:checkbox:checked').length > 1) {
        $('#btn2').removeClass('hide');
    } else {
        $('#btn2').addClass('hide');
    }

});

更新了以根据更新的问题使用引导类。
以下是

    if($('#mytable input:checkbox:checked').length > 1)
        $('#btn2').show();
    else
        $('#btn2').hide();

这是

    if($('#mytable input:checkbox:checked').length > 1)
        $('#btn2').show();
    else
        $('#btn2').hide();

试试这个

    var val = 0;
var groupTrCount = 0;
$(document).ready(function () {
    var obj={};
    $('#btn1').click(function () {
        if ($(".span4").val() != "") {
            $("#mytable").append('<tr id="mytr' + val + '"></tr>');
            $tr=$("#mytr" + val);
            $tr.append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr' + val + '" unchecked ></td>');
            $(".span4").each(function () {
                $tr.append("<td >" + $(this).val() + "</td>");
            });
            var arr={};
            name=($tr.find('td:eq(1)').text());
            email=($tr.find('td:eq(2)').text());
            mobile=($tr.find('td:eq(3)').text());
            arr['name']=name;arr['email']=email;arr['mobile']=mobile;
            obj[val]=arr;
            val++;
        } else {
            alert("please fill the form completely");
        }
    });
    $(document).on('click', '#btn2',function () {
        var creat_group = confirm("Do you want to creat a group??");
        if (creat_group) {
            console.log(obj);

            $tr.append("<td >" + groupTrCount + "</td>");

$("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
    $tr=$("#groupTr" + groupTrCount);
    $tr.append("<td >Group:" + groupTrCount + "</td>"); // or you can use whatever name you want in place of "Group:"
    var userColumn = "<ul>";
    $('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
      var count=0;
      $(this).find('td').each(function() {
         if(count == 1){
        userColumn+= "<li>" + $(this).html() + "</li>" ;
         }
         count++;
    });
});;
            userColumn+="<ul>";
            $tr.append("<td >" +userColumn+ "</td>");
        groupTrCount++;
        }        
    });
    $(document).on('change','#mytable input:checkbox',function () {
        var rowCount = $('#mytable tr').length;
        if($('input:checkbox:checked').length > 1 && rowcount > 6) {
        $('#btn2').removeClass('hide')
    }
    });
});

var-val=0；
var-groupTrCount=0；
$（文档）.ready（函数（）{
var obj={}；
$（'#btn1'）。单击（函数（）{
如果（$（“.span4”）.val（）！=”）{
$（“#mytable”）。追加（“”）；
$tr=$（“#mytr”+val）；
$tr.append（“”）；
$（“.span4”）。每个（函数（）{
$tr.append（“+$（this.val（）+”）；
});
var arr={}；
name=（$tr.find（'td:eq（1）'）.text（））；
email=（$tr.find（'td:eq（2）'）.text（））；
mobile=（$tr.find（'td:eq（3）'）.text（））；
arr['name']=name；arr['email']=email；arr['mobile']=mobile；
obj[val]=arr；
val++；
}否则{
提醒（“请完整填写表格”）；
}
});
$（文档）。在（'click'，'btn2'，函数（）{
var creat_group=确认（“您想创建一个组吗？”）；
如果（创建组）{
控制台日志（obj）；
$tr.append（“+groupTrCount+”）；
$（“#groupsTable”）。追加（“”）；
$tr=$（“#groupTr”+groupTrCount）；
$tr.append（“组：+groupTrCount+”）；//或者您可以使用您想要的任何名称来代替“组：”
var userColumn=“
”；
$（'#mytable tr'）。筛选器（':has（：复选框：checked'）。每个（函数（）{
var计数=0；
$（this）.find（'td'）.each（function（）{
如果（计数=1）{
userColumn+=“
”+$（this.html（）+”
”；
}
计数++；
});
});;
用户列+=“
”；
$tr.append（“+userColumn+”）；
groupTrCount++；
}        
});
$（document）.on（'change'，'#mytable输入：复选框'，函数（）{
var rowCount=$（'#mytable tr'）。长度；
if（$（'input:checkbox:checked'）。长度>1&&rowcount>6）{
$（'#btn2'）。removeClass（'hide'））
}
});
});

升级提琴是：
试试这个

    var val = 0;
var groupTrCount = 0;
$(document).ready(function () {
    var obj={};
    $('#btn1').click(function () {
        if ($(".span4").val() != "") {
            $("#mytable").append('<tr id="mytr' + val + '"></tr>');
            $tr=$("#mytr" + val);
            $tr.append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr' + val + '" unchecked ></td>');
            $(".span4").each(function () {
                $tr.append("<td >" + $(this).val() + "</td>");
            });
            var arr={};
            name=($tr.find('td:eq(1)').text());
            email=($tr.find('td:eq(2)').text());
            mobile=($tr.find('td:eq(3)').text());
            arr['name']=name;arr['email']=email;arr['mobile']=mobile;
            obj[val]=arr;
            val++;
        } else {
            alert("please fill the form completely");
        }
    });
    $(document).on('click', '#btn2',function () {
        var creat_group = confirm("Do you want to creat a group??");
        if (creat_group) {
            console.log(obj);

            $tr.append("<td >" + groupTrCount + "</td>");

$("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
    $tr=$("#groupTr" + groupTrCount);
    $tr.append("<td >Group:" + groupTrCount + "</td>"); // or you can use whatever name you want in place of "Group:"
    var userColumn = "<ul>";
    $('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
      var count=0;
      $(this).find('td').each(function() {
         if(count == 1){
        userColumn+= "<li>" + $(this).html() + "</li>" ;
         }
         count++;
    });
});;
            userColumn+="<ul>";
            $tr.append("<td >" +userColumn+ "</td>");
        groupTrCount++;
        }        
    });
    $(document).on('change','#mytable input:checkbox',function () {
        var rowCount = $('#mytable tr').length;
        if($('input:checkbox:checked').length > 1 && rowcount > 6) {
        $('#btn2').removeClass('hide')
    }
    });
});

var-val=0；
var-groupTrCount=0；
$（文档）.ready（函数（）{
var obj={}；
$（'#btn1'）。单击（函数（）{
如果（$（“.span4”）.val（）！=”）{
$（“#mytable”）。追加（“”）；
$tr=$（“#mytr”+val）；
$tr.append（“”）；
$（“.span4”）。每个（函数（）{
$tr.append（“+$（this.val（）+”）；
});
var arr={}；
name=（$tr.find（'td:eq（1）'）.text（））；
email=（$tr.find（'td:eq（2）'）.text（））；
mobile=（$tr.find（'td:eq（3）'）.text（））；
arr['name']=name；arr['email']=email；arr['mobile']=mobile；
obj[val]=arr；
val++；
}否则{
提醒（“请完整填写表格”）；
}
});
$（文档）。在（'click'，'btn2'，函数（）{
var creat_group=确认（“您想创建一个组吗？”）；
如果（创建组）{
控制台日志（obj）；
$tr.append（“+groupTrCount+”）；
$（“#groupsTable”）。追加（“”）；
$tr=$（“#groupTr”+groupTrCount）；
$tr.append（“组：+groupTrCount+”）；//或者您可以使用您想要的任何名称来代替“组：”
var userColumn=“
”；
$（'#mytable tr'）。筛选器（':has（：复选框：checked'）。每个（函数（）{
var计数=0；
$（this）.find（'td'）.each（function（）{
如果（计数=1）{
userColumn+=“
”+$（this.html（）+”
”；
}
计数++；
});
});;
用户列+=“
”；
$tr.append（“+userColumn+”）；
groupTrCount++；
}        
});
$（document）.on（'change'，'#mytable输入：复选框'，函数（）{
var rowCount=$（'#mytable tr'）。长度；
if（$（'input:checkbox:checked'）。长度>1&&rowcount>6）{
$（'#btn2'）。removeClass（'hide'））
}
});
});

Updted Fiddle是：
您的JSFIDLE示例中没有复选框？@RoryMcCrossan您需要输入一些记录，然后只会出现复选框，输入姓名、电子邮件和号码，按add按钮多于（5？）复选框？@Twocode多于一个，Java初学者我升级了我的小提琴复选框您的JSFIDLE示例中没有复选框？@RoryMcCrossan您需要输入一些记录，然后只会出现复选框，输入姓名、电子邮件和号码，按add按钮多于（5？）复选框？@Twocode多于一个，Java初学者我升级了我的小提琴签入，当表中有5个以上的用户时，此仅小提琴组按钮可见。当表中有5个以上的用户时，此仅小提琴组按钮可见