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

Question

我有一个简单的复选框以及如下所示的标签。

<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>

上面的整个代码将通过 JavaScript 动态插入。还会有多个像上面这样的复选框。我的目标是对两个事件进行两个不同的函数调用。

第一个，当我单击复选框标签时。我已经像上面那样实现了这一点。

第二个，当我单击复选框时，我需要使用不同的参数调用相同的函数。例如 loadSingleUnreadAdvisory('WSIO20DEMS131402',1,'201605','06',0);

我可以为所有复选框编写一个监听器。但是如何将多个参数传递给该函数呢？我可以使用分隔符发送 value 属性内的所有值。还有其他更好的方法吗？

Answer 1

您可以使用 HTML5 data-* 属性。您可以在 data-* 属性中拥有任何元素的所有数据。

如下所示。

$(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>