CODEWITHSUNDEEP
javascriptjquery
SpringLearner
SpringLearner

Reputation: 13854

How to append checkboxes from 2 different tables?

In this fiddle there are two tables which are having checkboxes in each row.

When the To button is clicked then a dialog box appears and after selecting user or groups drop down menu the respective tables appear.Now if the checkboxes are selected then the names corresponding to the checkboxes appear at the bottom.

For example from the groups dropdown if i select the 1st check box then alltest will appear at bottom.And similarily if i select the 1st checkbox then test will appear at the bottom.

My problem Suppose I selected 1st 2 checkboxes from the users drop down then test test2 will be shown at the bottom.Now if I selected the groups dropdown and select the 1st checkbox then test test2 is disappearing and alltest is appearing.I want test test2 alltest all in the bottom.That means all the selected checkboxes name at the bottom.Please tell me how to do

Upvotes: 0

Views: 81

Answers (2)

rynhe
rynhe

Reputation: 2529

Try This

Demo : http://jsfiddle.net/rynhe/LBPB6/33/

function appendtext() {
        var httext = "";
        $("input[type='checkbox']:checked", "#mytable12").each(function() {
          httext += $(this).parent().next().text() + " ,";   
       });
        $("input[type='checkbox']:checked", "#groupsTable1").each(function() {
          httext += $(this).parent().next().text() + " ,";          
        });
        return httext;
}
     $("input[type='checkbox']", "#mytable12").on('change', function (event) {
      $("#ToAdd").html(appendtext());
   });

$("input[type='checkbox']", "#groupsTable1").on('change', function (event) {
         $("#ToAdd").html(appendtext()); 
   });

});

While clicking,You have to check all checkboxes in user and group...

$('#ToOk').click(function(){
   $("#number").val($("#ToAdd").text());
});

Get all values from span ToAdd and add that value to number textbox

Upvotes: 1

visnu
visnu

Reputation: 935

See demo http://jsfiddle.net/Zh8kB/3/ Try as shown below Use separate tag 

<span id="ToAdd_info">i want the checked boxes name here</span>
<span id="ToAdd"></span>

and modified your js as shown below var count=0;var TosCheckbox = new Array();

     $("input[type='checkbox']", "#mytable12").on('change', function (event) {
alert('hi');
        $("#ToAdd_info").hide();
        $("input[type='checkbox']:checked", "#mytable12").each(function() {
          //  alert('hi');
           $("#ToAdd").append($(this).parent().next().text() + " ");           
       });
   });

$("input[type='checkbox']", "#groupsTable1").on('change', function (event) {
alert('hello');
        $("#ToAdd_info").hide();
        $("input[type='checkbox']:checked", "#groupsTable1").each(function() {
          //  alert('hi');
           $("#ToAdd").append($(this).parent().next().text() + " ,");           
       });
   });

});


$('body').on('click', '#to-btn', function () {
   console.log($('a[href="#users"]'));
   $("#ToAdd_info").show(); 
    $("#ToAdd").html('');
 $('a[href="#users"]').trigger('click');

});

Upvotes: 0

Related Questions