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

标签 javascript jquery checkbox

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

<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- *属性。您可以将所有数据包含在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>

关于javascript - 具有多个参数的复选框函数调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37064141/

相关文章:

ruby-on-rails - Rails 3. 使用复选框在一列中有多个值

javascript - 使用split后如何获取数组中的第一项

javascript - RequireJS - 配置;路径和垫片不工作

javascript - 嵌套事件是Javascript/JQuery的良好实践吗?

jquery - 在 jQuery 中查找所有未选中的复选框

php - 无法弄清楚如何将&lt;input type =“checkbox”>转换为PHP bool 值

javascript - 如何解决 react 中的元素类型无效错误

javascript - Javascript-字符串拆分

jquery - 使用 jquery 平滑滚动图像

jquery - 使用 jquery 获取标签文本