Question

我正在尝试创建一个带标签的复选框。当用户单击标签时，它将检查是否选中了复选框。第一次，我点击标签，选中该框，但没有警报动作。在我第二次点击后，它开始运行，发生警报动作。我做错了什么。我试过使用个人ID。点击不工作。

<script type="text/javascript">
  var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
   
  jQuery.each( elements, function( id_name, num ) {

    $('#'+ id_name).click(function(){
    
       if ($('#'+id_name +'_checkbox').prop('checked')) {
             alert('Checked');
         }else{
           alert('unchecked');
           }
       });
  });
</script>

<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
							
<input type="checkbox" name="emo_checkbox"  id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
				
<input type="checkbox" name="emo_checkbox"  id="emo_cute_checkbox"> 
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>

Answer 1

<script type="text/javascript">
    $('label').click(function() {
        if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
            alert('Checked');
        }
        else {
            alert('Unchecked');
        }
    });
</script>

<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>

<input type="checkbox" name="emo_checkbox"  id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>

<input type="checkbox" name="emo_checkbox"  id="emo_cute_checkbox"> 
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>

另外可以肯定的是，你已经包含了jQuery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

在新版本的jQuery中，您可以使用以下内容：

if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
    alert('Checked');
}
else {
    alert('Unchecked');
}

这段代码：

// Just be careful, its inverted. Because, when you click label to check checkbox, the checkbox is still unchecked, and after alert will be checked...
if ($('#'+ $(this).attr('id') + '_checkbox').is(':checked') {
    alert('Unchecked');
}
else {
    alert('Checked');
}

Workind DEMO here in jsFiddle

Answer 2

简化事情，你不需要每个循环：

 $('label').click(function() {
        name=this.id;
       if ($('#'+name+'_checkbox').prop('checked')) {
         alert('Checked');
       }
       else{
         alert('unchecked');
       }
    });

演示：http://jsfiddle.net/fqvajvo1/2/

脚本正常运行，脚本检查道具，但在标签上点击 - ＆gt;复选框实际上是未选中的，属性更改会在以后发生。

所以，在你的情况下，反向逻辑可能有所帮助（如果你需要警报）：

http://jsfiddle.net/fqvajvo1/4/：）

Answer 3

我总是使用.is(':checked')。我发现它更可靠

<script type="text/javascript">
      var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };

      jQuery.each( elements, function( id_name, num ) {

        $('#'+id_name +'_checkbox').change(function(){

           if ($(this).is(':checked')) {
               alert('Checked');
           }else{
               alert('unchecked');
           }
        });
      });
    </script>

Answer 4

您的点击ID不是完整的名称，因此添加完整的名称并调用$（this）属性即可......

 var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
   
  jQuery.each( elements, function( id_name, num ) {
      
    $('#'+ id_name+'_checkbox').click(function(){
    
       if ($(this).prop('checked')) {
             alert('Checked');
         }else{
           alert('unchecked');
           }
       });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
							
<input type="checkbox" name="emo_checkbox"  id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
				
<input type="checkbox" name="emo_checkbox"  id="emo_cute_checkbox"> 
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>

Answer 5

使用.on来处理所有事件和所有点击on jQuery

主要用于动态创建元素

$(document).on('click','selector',function(){

});

使用类名作为分组元素的最佳选项

复选框检查第一次不工作，第二次后，没关系

5 个答案: