Question

我尝试使用jQuery 1.12检查/取消选中复选框。这是我的代码：

＆＃13;

$(document).ready(function() {
  $('#btn-agree').click(function() {
    $('#checkbox-3').prop('checked', true);
  });
  $('#btn-notagree').click(function() {
    $('#checkbox-3').prop('checked', false);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<input type="checkbox" name="agreement" id="checkbox-3" />
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>

＆＃13;

当我点击btn-agree时，该功能不会返回任何错误，但不会选中该复选框。 console.log($('#checkbox-3').prop('checked');显示true

有人能指出我代码中的错误吗？

修改我相信问题来自我项目的其他地方。请随意删除这个问题。

Answer 1

你必须做这样的事情，这是chekc是否选中了复选框，如果取消选中它，否则检查它

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="agreement" id="checkbox-3"/>
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>

<script>
$(document).ready(function() {
  $('#btn-agree').click(function() {
    if($('#checkbox-3').prop('checked'))
    $('#checkbox-3').prop('checked',false);
  else{
    $('#checkbox-3').prop('checked',true);
    }
  });
});
  </script>

Answer 2

您还可以使用is(':checked')检查选中或未选中复选框

＆＃13;

$(document).ready(function() {
    $('#btn-agree').click(function() {
        if($("#checkbox-3").is(':checked') )
        {
            $("#checkbox-3").prop('checked',false);
        }            
        else
        {
            $("#checkbox-3").prop('checked',true); 
        }                    
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="agreement" id="checkbox-3"/>
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>

＆＃13;

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="agreement" id="checkbox-3"/>
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>

<script>
$(document).ready(function() {
  $('#btn-agree').click(function() {
    $(this).prop('checked',true);
  });
$('#btn-notagree').click(function() {
    $(this).prop('checked',false);
  });
});
  </script>

复选框prop（）无法按预期工作

3 个答案: