If checkbox is checked, show "Activated" else show "Deactivated"

Question

I have this checkbox.

<input type="checkbox" value="" name="checkycheck"><label for="checkycheck">Activated</label>

I'm figuring out how to show "Activated" as the label when the input is checked. When the input is not checked, show "Deactivated".

So to explain it more:

if(checkycheck == checked) {
     echo 'Activated';
} else {
     echo 'Deactivated';
}

That kind of looks like PHP but I want that in real time in jQuery. I have tried looking on Google but I'm really not much getting out of it and I hope that someone with more jQuery knowledge than me can help me out.

Thanks a lot.

Answer 1

You should give your input an id, because that is what a label can reference with the for attribute. With that change, the code could look like this:

$('#checkycheck').change(function () {
  $('label[for="checkycheck"]').text(this.checked ? 'Activated' : 'Deactivated');
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" value="" name="checkycheck" id="checkycheck">
<label for="checkycheck">Activated</label>

Note the change() call near the end which makes sure the code is also executed on page load, setting the text correctly from the start.

Answer 2

This is a duplicate of several questions on Stackoverflow. I answered one yesterday, which you can see here.

var resultEle = document.getElementById("result");
function showAnswer(ele) {
    if(ele.checked) {
      result.innerHTML = "You checked Yes!";
    }
    else {
      result.innerHTML = "";
    }
}

<table>
    <tr>
        <td class="align">
            Yes<br />
            <input type="checkbox" onchange="showAnswer(this)" />
        </td>
        <td>
            <span id="result"></span>
        </td>
    </tr>
</table>

Answer 3

$('#checkbox').on('change',function(){
if($(this).checked)
   $('label[for="checkbox"]').innerHtml('active');
else
   $('label[for="checkbox"]').innerHtml('deact');
});

this is just a quick mockup, you should check my spelling. as well you have to add "checkbox" as id for the input as well as for name