Question 36277 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Show checked checkbox value in a div – Jquery

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

  1. Check/Uncheck the checkbox when the parent element is clicked
  2. 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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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 class="chkbox" type="checkbox" name="1" /></label></td>
        </tr><tr>
        <td><label><span>Checkbox 2</span><input  class="chkbox" type="checkbox" name="2" /></label></td>
        </tr><tr>
        <td><label ><span>Checkbox 3</span><input  class="chkbox" type="checkbox" name="3" /></label></td>
        </tr>
    </table>
    
Result:<div id="myDiv"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search