javascript - 如何在单击按钮时选中复选框

Question

在用户选项卡中，有些行带有复选框。因此，如果选中了 2 个以上的复选框，则会出现一个名为组的按钮。

现在，当单击组按钮时，它会询问一个名称，然后在组表中按右侧的确定按钮后，将创建一个组。例如，选择第一行和最后一行，然后单击组按钮。将出现一个对话框，要求输入名称。在输入栏中输入test，之后在右侧组表中出现test(请看截图)。

现在我的问题是:如果我现在单击测试(组名)，那么将选中左侧的复选框。所以在我的例子中，第一个复选框和最后一个复选框将被选中。请告诉我该怎么做。这是 fiddle

js代码如下

$(function() { 
    $("#datetimepicker").datetimepicker({ 
        format: "'dd/MM/yyyy hh:mm:ss'", 
        linkField: "#txt", 
        linkFormat: "yyyy-mm-dd hh:ii", 
        autoclose: true, 
    }); 

    jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){ 
        $(".darea1").val($( ".darea1" ).val()+$( "#txt" ).val()); 
    }); 

}); 
$('#tabAll').click(function(){ 
    $('#tabAll').addClass('active'); 
    $('.tab-pane').each(function(i,t){ 
        $('#myTabs li').removeClass('active'); 
        $(this).addClass('active'); 
    }); 
}); 
$('body').on('click', '.btn', function(){ 
    if(this.id=='openAlert') {
        $('#number').val('');}else{$('#number').val(this.id);
    }
});
$(document).ready(function(){
    $("#signout").click(function() { 
        window.location.replace("logout.jsp"); 
    });
    //next line
/*var val=0;
$(document).ready(function(){


  $('#btn1').click(function(){
      if($(".span4").val()!="")
      {
  $("#mytable").append('<tr id="mytr'+val+'"></tr>');
  $("#mytr"+val).append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr'+val+'" checked ></td>');

             $(".span4").each(function () {

             $("#mytr"+val).append("<td >"+$(this).val()+"</td>");

              });
              val++;
      }
      else
      {
          alert("please fill the form completely");
      }
              });
    $('#btn2').click(function(){
        var creat_group=confirm("Do you want to creat a group??");
        if(val>1){
           alert(creat_group);


              }
    });




});*/
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 email=new Array();
        var username=new Array();
        var mobno=new Array();
        var grpname;
        var creat_group = prompt("Name your group??");
        grpname=creat_group;

        if (creat_group) {
            console.log(obj);
            $("#groupTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
            $tr=$("#groupTr" + groupTrCount);
            $tr.append("<td >" + creat_group + "</td>");
            $('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
                var count=0;
                var arrid=0;
                $(this).find('td').each(function() {

                    //your ajax call goes here
                    if(count == 1){
                        username[arrid]=$(this).html();        
                    }
                  if(count==2)
                    {
                        email[arrid]=$(this).html();
                    }
                    if(count==3)
                    {
                        mobno[arrid]=$(this).html();
                    }
                    count++;
                    });
                arrid++;
            });
            $.ajax(
               {
                   type: "POST",
                   url: "messageSending.jsp", //Your full URL goes here
                   data: { username: username, email: email,mobno:mobno,grpname:grpname},
                   success: function(data, textStatus, jqXHR){
                       alert(data);                  
                   },
                   error: function(jqXHR){
                       alert(jqXHR.responseStatus);
                   }
               });
        groupTrCount++;
        }        
    });
    $(document).on('change','#mytable input:checkbox',function () {
        if(!this.checked)
        {
            key=$(this).attr('name').replace('mytr','');
            alert(key);
            obj[key]=null;
        }
//show group
if($('#mytable input:checkbox:checked').length > 1) {
        $('#btn2').removeClass('hide')
    }
    else {
        $('#btn2').addClass('hide')
    }
//
    });
});


//
        $('#openAlert').click(function(){

            var number = $('#number').val(); // If its a text input could use .text()
            var msg = $('#darea').val(); //If its a text input could use .text()
alert(msg);
            $.ajax(
                {
                    type: "POST",
                    url: "messageSending.jsp", //Your full URL goes here
                    data: { toNumber: number, body: msg},
                    success: function(data, textStatus, jqXHR){
                        alert(data);                  
                    },
                    error: function(jqXHR){
                        alert(jqXHR.responseStatus);
                    }
                });
        });
    });
$(function ()  
{ $("#number").popover({title: 'Enter Mobile Number',content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"});  
});  
$(function ()  
{ $("#body").popover({title: 'Message Body',content: "Maximum 160 characters allowed"});  
});

Answer 1

试试这个解决方案

为复选框添加data-id...设置与tr id 或任何值相同的值

<tr id="46">
       <td>
          <input data-id="46" type="checkbox"></td>
       <td>aaa</td>

jQuery

在你的代码中添加这一行

var sCheckbox = new Array();
$('#mytable tr').find('input[type="checkbox"]:checked').each(function(i) {               
     sCheckbox.push($(this).attr("data-id"));
});
var ds = (sCheckbox.length > 0) ? sCheckbox.join(",") : "";

修改这一行

$tr.append("<td data-selected='"+ds+"'>" + creat_group + "</td>");  

添加这个事件

$(document).on('click','#groupTable tr td',function () {
        var dataids = $(this).attr("data-selected").split(",");
        $('#mytable tr').find('input[type="checkbox"]').attr("checked",false);
        $(dataids).each(function(key,dataid) {
               $('#mytable tr').find('input[data-id="'+dataid+'"]').attr("checked",true);
        })
    });

Live Demo

编辑

Updated Demo

在 checkbox 元素中添加 data-id="mytr' + val + '"

$tr.append('<td class=\"cb\"><input data-id="mytr' + val + '" type=\"checkbox\" value=\"yes\" name="mytr' + val + '" unchecked ></td>');

注意:检查我在 fiddle 中的内联评论