如何選擇按鈕單擊上的復選框

Question

在“用戶”選項卡中，有些行具有復選框。 因此，如果選中了兩個以上的復選框，則會出現一個名為group的按鈕。

現在，當單擊組按鈕時，它將要求輸入名稱，並在組表的右側按下確定按鈕后，將創建一個組。 例如，選擇第一行和最后一行，然后單擊組按鈕。 出現一個對話框，要求輸入名稱。 在輸入字段中輸入測試，然后在右側組表中顯示測試（請參見屏幕截圖）。

現在我的問題是：如果我現在單擊測試（組名），則在左側的復選框將被選中。 因此，在我的情況下，第一個復選框和最后一個復選框將被選中。 請告訴我該怎么做。 這是小提琴

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);
        })
    });

現場演示

編輯

更新的演示

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

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

注意：在小提琴中檢查我的內聯評論