Question

这是我的代码，其复选框包含一个和两个类，如下所示

<input type="checkbox" class="one" value="1">
<br/>
<input type="checkbox" class="two" value="2">
<br/>
<input type="checkbox" class="one" value="3">
<br/>

如果选中或取消选中该复选框，我将使用以下代码进行调用

$(document).on('change', '.[type="checkbox"]', function(event, data){
    alert('checked ');
});

我的问题是，我如何在事件处理程序中使用类？

我试过这种方式

$(document).on('change', '.one .[type="checkbox"]', function(event, data){
    alert('checked ');
});
$(document).on('change', '.two .[type="checkbox"]', function(event, data){ 
    alert('checked ');
});

http://jsfiddle.net/FdEhf/32/

Answer 1

这是一个错误的选择器：

 '.[type="checkbox"]'

在属性选择器之前，您不能拥有点.。

现在回答你的问题，你可以这样使用：

 '.one[type="checkbox"]'
 // make sure you don't have any space in between.

您可以为每个复选框创建一个公共类名，并且可以在该类上绑定更改事件：

＆＃13;

$('.commonClass[type="checkbox"]').on('change', function(event, data) {
  if (this.checked) {
    console.log(this.classList[1]+' checked ');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="commonClass one" value="1">
<br/>
<input type="checkbox" class="commonClass two" value="2">
<br/>
<input type="checkbox" class="commonClass three" value="3">
<br/>

＆＃13;

除非您有动态生成的:checkbox元素，否则您不需要使用 事件委派 绑定任何事件。

Answer 2

是的，这是可能的。

您可以使用此选择器：

.one[type="checkbox"]

要将其细分，此选择器将匹配任何具有.one类的元素，该类作为类型属性等于checkbox。

您也可以将[type="checkbox"]作为选择器，然后在更改处理程序内部检查元素类。如果您希望在不同的复选框之间具有稍微不同的功能，这将非常有用 -

$(document).on('change', '[type="checkbox"]', function(event, data){
    var classes = $(this).attr('class').split(' '); // may be multiple classes - split them into an array
    if ( $.inArray( 'one', classes ) ){
      alert('.one was changed!');
    } else {
      alert('some other checkbox was changed!');
    }
});

对于这个简单的例子，它可能有点矫枉过正，但它可以让你进一步自定义不同的复选框。

Answer 3

首先删除一个额外的＆＃34;。＆＃34;在[type="checkbox"]之前和第二次使用.one .two之类的类作为事件监听器，您将根据需要获得结果。

是否可以使用复选框更改与类的组合？

3 个答案: