Show checked checkbox value in a div-CodePudding

I have a group of checkboxes with custom design in a div. Checkbox should work when the parent div is clicked. I have used td example in the fiddle for simple reference.

There are the 2 thing I am trying to achieve

Check/Uncheck the checkbox when the parent element is clicked
Display the selected checkbox value under the Result heading

First one is working fine. But for displaying(toggle) the selected checkbox value works only when clicked directly on checkbox/label. But I need this is work even when clicked on the parent element.

Here is what I have so far

    //Checkbox selection
    jQuery("td input[type='checkbox'],td label").on('click', 
      function(e){
        e.stopPropagation();
    });

        // Check/uncheck checkboxes clicking on its parent div
        jQuery("td").click(function(){               
             var arr = jQuery(".chkbox:checked").map(function() { return jQuery(this).prev().html(); }).get();
            var chk = jQuery(this).find("input[type='checkbox']");
            if(chk.is(":checked") == false)
            {
                chk.prop("checked", true);
            }
            else
            {
                chk.prop("checked", false);
            }
            
        });
//Displayes the selected checkbox text
jQuery(function() {
  jQuery(".chkbox").change(function() {
    var arr = jQuery(".chkbox:checked").map(function() { return $(this).prev().html(); }).get();
    jQuery("#myDiv").html(arr.join(','));
  });
});

DEMO

CodePudding user response：

This should do the trick:

function ToggleBGColour(item) {

    var td = $(item).parent();      

    if (td.is('.rowSelected'))      
        td.removeClass("rowSelected");      
    else        
        td.addClass("rowSelected");     

}

$('td:has(input[type=checkbox])').click(function (event) {
if(event.target.type !== 'checkbox') { 
    $(this).find('input[type=checkbox]').click();
  var arr = $(":checkbox:checked").map(function() { return $(this).next().text(); }).get();
    $("#myDiv").text(arr.join(','));
  }
});

$(function() {
  $(":checkbox").change(function() {
    var arr = $(":checkbox:checked").map(function() { return $(this).next().text(); }).get();
    $("#myDiv").text(arr.join(','));
  });
});

Of course you could combine these 2 functions into one

CodePudding user response：

Hope this might help.

function displayOutput(){
  var arr = jQuery("#tableName .chkbox:checked").map(function() { return jQuery(this).prev().html(); }).get();
  jQuery("#myDiv").html(arr.join(','));
}

jQuery( function (){
    jQuery('#tableName tr, #tableName tr label').click( function (e){
    e.stopPropagation();
        if ( jQuery(this).prop('tagName')!=='LABEL' ){
        var checkbokElem = jQuery(this).find('.chkbox');
        checkbokElem.is(':checked') ? checkbokElem.prop('checked', false) : checkbokElem.prop('checked', true);
      }
        displayOutput();
  });

});

label { display: block; }
.rowSelected { background-color: #eee; }
td{
      background: #02adcb;
    padding: 20px;
    color: #fff;
    border: solid 1px #333;
}
label{display:inline-block}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


 <table id="tableName" width="500" border="0">
        <tr>
            <td><label><span>Checkbox 1</span><input  type="checkbox" name="1" /></label></td>
        </tr><tr>
        <td><label><span>Checkbox 2</span><input   type="checkbox" name="2" /></label></td>
        </tr><tr>
        <td><label ><span>Checkbox 3</span><input   type="checkbox" name="3" /></label></td>
        </tr>
    </table>
    
Result:<div id="myDiv"></div>