Checkbox value is change to 1 but when unchecked then it cannot be change to 0 

```js
$('.ChkBox').change(function() {
  if ($(this).attr('checked')) {
    $(this).val('1');
  } else {
    $(this).val('0');
  }
  alert($(this).val());
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked data-plugin="switchery" data-color="#648c2c" data-size="small" value="0" class="ChkBox" name="sms[]" />
```

In the alert I always get 1. 

By default value is 0 and checked. 
I want it so that when the box is unchecked I get 1, and when checked I get 0. Please tell me where I am doing wrong.