具有多个参数的checkbox函数调用

checkbox function call with multiple parameters

本文关键字：checkbox 函数调用 参数      更新时间：2023-09-26

我有一个简单的复选框和下面的标签。

<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属性内的所有值。还有其他更好的方法吗？

您可以使用HTML5数据-*属性。您可以在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>

相关文章：