带有数据属性条件的Jquery复选框问题

Question

请你看看这个spinet，让我知道为什么if($(this).data('type')=="red"){}在这里不起作用？

$('input:checkbox[name=data]').on('change', function(){
    if($(this).data('type')=="red"){
         if($(this).is(':checked')){
            alert('Red Checkbox Checked');
        }
        else{
              alert('Red Checkbox Un Checked');
        }
    }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="data" data-tyep="red">
<input type="checkbox" name="data" data-tyep="red">
<input type="checkbox" name="data" data-tyep="red">
<input type="checkbox" name="data" data-tyep="green">
<input type="checkbox" name="data" data-tyep="green">
<input type="checkbox" name="data" data-tyep="green">
<input type="checkbox" name="data" data-tyep="blue">
<input type="checkbox" name="data" data-tyep="blue">
<input type="checkbox" name="data" data-tyep="blue">
<input type="checkbox" name="data" data-tyep="blue">

Answer 1

你错误拼写了＃34;数据类型＆＃34;在html代码中＆＃34; data-tyep＆＃34;。

请参阅以下代码。

＆＃13;

＆＃13;

$('input:checkbox[name=data]').on('change', function(){
    if($(this).data('type')=="red"){
         if($(this).is(':checked')){
            alert('Red Checkbox Checked');
        }
        else{
              alert('Red Checkbox Un Checked');
        }
    }
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="data" data-type="red">
<input type="checkbox" name="data" data-type="red">
<input type="checkbox" name="data" data-type="red">
<input type="checkbox" name="data" data-type="green">
<input type="checkbox" name="data" data-type="green">
<input type="checkbox" name="data" data-type="green">
<input type="checkbox" name="data" data-type="blue">
<input type="checkbox" name="data" data-type="blue">
<input type="checkbox" name="data" data-type="blue">
<input type="checkbox" name="data" data-type="blue">

＆＃13;

＆＃13;

＆＃13;