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- *属性中任何元素的所有数据。

如下所示。

＆＃13;

$(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);
  }
});

＆＃13;

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

＆＃13;

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

1 个答案: