2016-12-06 78 views
2

我想提示是消息如果複選框是複選。 並且想要提示沒有信息如果複選框是未檢查如何使用JQUERY設置複選框checked和unchecked event

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/titatoggle/1.2.11/titatoggle-dist.css" > 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="dist/css/bootstrap-select.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="dist/js/bootstrap-select.js"></script> \t 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    </head> 
 
    <body> 
 
    <div class="... checkbox-slider--b-flat checkbox-slider-md col-md-4" style="margin-top: 22px;  margin-left: 53px;" id="with_answer"> 
 
    <label> 
 
\t <input type="checkbox"><span>Answer</span> 
 
\t </label> 
 
    </div> 
 
</body> 
 
</html> 
 

+0

有很好的例子:[http://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery](http://stackoverflow.com/questions/2204250/check-if -checkbox-is-checked-with-jquery) – dpp

回答

1

您可以使用jQuery的change事件,你可以做這樣的:

$(function() { 
 
\t $('.checkbox').on('change', function(e) { 
 

 
\t \t if($(this).is(':checked')) { 
 
\t \t alert('Yes') 
 
\t } else { 
 
\t \t alert('No') 
 
\t } 
 
\t }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 

 
    <input class="checkbox" type='checkbox'> Checkbox 
 

 
</div>

爲您的代碼,代碼應該是這樣的:

$(function() { 
 
    
 
    $('.myCheckbox').on('change', function(e) { 
 
    if($(this).is(":checked")) { 
 
     alert('checked'); 
 
    } else { 
 
     alert('unchecked'); 
 
    } 
 
    
 
    }); 
 
    
 
});
<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/titatoggle/1.2.11/titatoggle-dist.css" > 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="dist/css/bootstrap-select.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="dist/js/bootstrap-select.js"></script> \t 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    </head> 
 
    <body> 
 
    <div class="... checkbox-slider--b-flat checkbox-slider-md col-md-4" style="margin-top: 22px;  margin-left: 53px;" id="with_answer"> 
 
    <label> 
 
\t <input class="myCheckbox" type="checkbox"><span>Answer</span> 
 
\t </label> 
 
    </div> 
 
</body> 
 
</html>

希望這會有所幫助!

+0

$(this).is(':checked')只是增加開銷,當this.checked已經是你以後。 – Taplar

+0

謝謝@Taplar這正是我想說的,但你可以請爲我的代碼中使用的Ti-Ta切換按鈕做到這一點.. –

+0

@MuhammadHaris'Ti-Ta切換'? – Taplar

1

您是change事件之後。將偵聽器綁定到更改事件,然後可以檢查this.checked以查看執行所需邏輯是否爲真/假。

相關問題