checkbox function call with multiple parameters

Question

I have a simple checkbox along with label like below.

<input id="unreadCheck0" class="styled" type="checkbox" value="WSIO20DEMS131402">
<label for="unreadCheck0">
<a id="unread0" class="alert-link" href="javascript:loadSingleUnreadAdvisory('WSIO20DEMS131402',0,'201605','06',0);">WSIO20DEMS131402</a>
</label>

The whole code above will be dynamically inserted via javascript. Also there will be multiple check boxes like above. My objective is to make two different function call on two events.

First one, when I click check box label. I have achieved this like above.

Second one, when I click the checkbox I need to call the same function with different parameters. For example loadSingleUnreadAdvisory('WSIO20DEMS131402',1,'201605','06',0);

I can write a listener for all check boxes. But how to pass multiple parameters to that function? I can send all values inside value property with delimiter. Is there any other better approach to do this?

Use data- attributes and in jQuery listen to events and based on the checkbox clicked you can get all the data- attributes — Sandeep Nayak
– Sandeep Nayak, Commented May 6, 2016 at 4:27

Sandeep Nayak · Accepted Answer · 2016-05-06 04:44:44Z

You can use HTML5 data-* attributes. You could have all your data for any elements in data-* attributes.

Something like below.

$(document).ready(function(){
    $(".chkBoxLabel").on("click", function(evnt){
        evnt.preventDefault();
  		console.log($(evnt.target).data("info"));	        
        var param1 = $(evnt.target).data("info")        
        callMe(param1);
  });
  
	$(".chkBox").on("click", function(evnt){
  		console.log($(evnt.target).data("fname"));	
        console.log($(evnt.target).data("lname"));
        var param1 = $(evnt.target).data("fname")
        var param2 = $(evnt.target).data("lname")
        callMe(param1, param2);
        evnt.stopPropagation();
  });
  
  function callMe(){
    // Based on number of params you can handle appropriately
    console.log(arguments.length);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="chkBoxLabel" data-info="label1">
<input class="chkBox" type="checkbox" data-fname="sandeep" data-lname="nayak"/>
Chkbox1 </label>  
<label class="chkBoxLabel" data-info="label2">
<input class="chkBox" type="checkbox" data-fname="sample" data-lname="name"/>
  Chkbox2</label>

Collectives™ on Stack Overflow

checkbox function call with multiple parameters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related