複選框prop（）不按預期方式工作

-2

我試圖使用jQuery 1.12來選中/取消選中複選框。這是我的代碼：複選框prop（）不按預期方式工作

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

<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>

當我點擊btn-agree，該函數不返回任何錯誤，但該複選框沒有被選中。 console.log($('#checkbox-3').prop('checked');顯示true

任何人都可以指出我的代碼有什麼問題嗎？

編輯我相信問題來自我的項目中的其他地方。請隨時刪除此問題。

來源

2016-12-01 dapidmini

您綁定的事件只有'btn-agree'使用'$（'＃btn-notagree'）'綁定第二個點擊處理程序。 – Satpal

可能重複[設置「選中」與jQuery的複選框？]（http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery） – jkris

@Satpal哦對。對不起，我寫了錯誤的代碼。第二個應該是＃btn-notagree – dapidmini

你必須做這樣的事情，那就是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>

來源

2016-12-01 08:30:53 GraveyardQueen

您還可以使用is(':checked')檢查是否選中複選框或不選中

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

<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>

來源

2016-12-01 08:39:33

<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>

來源

2016-12-01 08:49:26

爲什麼兩個事件綁定都將prop設置爲false？ – dapidmini

請立即檢查。 –

複選框prop（）不按預期方式工作

回答

相關問題