具有多个参数的复选框函数调用

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?

Answer 1

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>