复选框检查第一次不起作用，第二次之后就可以了答案

【问题标题】：Checkbox check first time not working, after second time, it is OK复选框检查第一次不起作用，第二次之后就可以了
【发布时间】：2015-09-21 22:55:57
【问题描述】：

我正在尝试创建一个带有标签的复选框。当用户单击标签时，它将检查复选框是否选中。第一次，我单击标签，该框被选中，但没有警报动作。在我第二次单击后，它开始起作用，发生警报动作。我做错什么了。我曾尝试使用个人 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>

【问题讨论】：

把答案贴在下面，看看对你有没有帮助。
尝试使用 jsFiddle...它总会帮助我们...
您的代码正在生成警报here。看起来您错过了环境中的 jquery.js 文件，而您在 sn-p 中错过了它。并且在 JS 面板中编写代码时不要使用 script 标签。
您的问题解决了吗？您是否在这里的某个答案中找到了解决方案？所以请接受答案...谢谢。

标签： javascript jquery checkbox

【解决方案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 中你可以使用 insted 这个：

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

【讨论】：

对不起，我忘了贴});，这个问题，我第一次点击标签时它没有提示，第二次它会提示
“小心点，它是倒置的。因为，当你点击标签选中复选框时，复选框仍然未被选中，并且在警报将被选中...” - 这解决了我原本不相关的问题 -谢谢你的解释！

【解决方案2】：

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

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

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

脚本运行正确，脚本检查道具，但在标签上单击 -> 复选框确实未选中，属性更改稍后进行。

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

http://jsfiddle.net/fqvajvo1/4/ :)

【讨论】：

这是正确的；但是有一个错误...它倒置了...因为，当您单击label 选中复选框时，checkbox 仍然未选中，并且在警报之后将被选中...
是的，也注意到了 - 不知道警报的意图是什么，但是是的...这里需要一些反向逻辑，def...:) jsfiddle.net/fqvajvo1/4

【解决方案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>

【讨论】：

这是正确的；但是有一个错误...它倒置了...因为，当您单击label 选中复选框时，checkbox 仍然未选中，并且在警报将被选中...
只需切换点击即可更改
将click 切换到change 将完全破坏功能...因为label 没有change 方法...您正在对label 执行click 方法和更改的是与之关联的checkbox...
不，不会的，只要在checkbox上绑定change函数即可。单击标签时，它将触发复选框上的更改事件

【解决方案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>

【讨论】：

【解决方案5】：

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

主要用于动态创建元素

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

});

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

【讨论】：