CODEWITHSUNDEEP
javascript
Doran L
Doran L

Reputation: 299

Javascript change of color with checkbox

I have a javascript here which is able to change color when checkbox is checked, but it had to rely on use of external libraries for it to work. Would it be possible for it not use external libraries such as function () ?

<p style="color: red; font-weight: bold;">I have read and agree to the terms and conditions
            <input type="checkbox" id="termsChkbx" onchange="isChecked(this,'sub1')"/></p>

JS:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
$(document).ready(function(){
    $('#termsChkbx').change(function(){
        if($(this).is(':checked'))
        {
            $(this).parent('p').css('color','black');
        }
        else
        {
             $(this).parent('p').css('color','red');
        }
    });

Upvotes: 1

Views: 11703

Answers (6)

Jon L
Jon L

Reputation: 569

Pure javascript:

document.getElementById('termsChkbx').onclick = function() {
    document.getElementById('termsChkbx').parentElement.style.color = this.checked ? "black" : "red";
};

Upvotes: 0

user1106925
user1106925

Reputation:

Yes, this can be done without needing libraries. A fairly direct translation would be this:

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('termsChkbx').addEventListener("change", function(){
        if(this.checked) {
           this.parentNode.style.color = "black";
        } else {
           this.parentNode.style.color = "red";
        }
    }, false);
});

Or a little shorter like this:

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('termsChkbx').addEventListener("change", function(){
      this.parentNode.style.color = this.checked ? "black" : "red";
    }, false);
});

Upvotes: 1

Azad
Azad

Reputation: 5264

try,

function isChecked(){

  var chk = document.getElementById("termsChkbx");
  if(chk.checked){
     chk.parentElement.style.color  = "black";
  }
  else{
     chk.parentElement.style.color  = "red";
  }
}
<p style="color: red; font-weight: bold;">I have read and agree to the terms and conditions
            <input type="checkbox" id="termsChkbx" onchange="isChecked()"/></p>

Upvotes: 0

j08691
j08691

Reputation: 207901

You could use:

function isChecked(elem) {
    elem.parentNode.style.color = (elem.checked) ? 'black' : 'red';
}

jsFiddle example

Upvotes: 4

meskobalazs
meskobalazs

Reputation: 16041

<input type="checkbox" id="termsChkbx" onchange="termsChecked()"/>

And write a simple JS function:

function termsChecked() {
    var chk = document.getElementById('termsChkbx');
    if (chk.checked) {
         chk.parentNode.style.color = 'black';
    } else {
         chk.parentNode.style.color = 'red';
    }
}

This does put JS code in the HTML markup, which is not really preferable, but this will work with older browsers not supporting the DOMContentLoaded event. If you are targeting only modern browser, an ActionListener is the way to go.

Upvotes: 0

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Try this:

    $(document).ready(function(){
        $('#termsChkbx').on('change', function(e){
          e.preventDefault();
            if($(this).is(':checked'))
            {
                $(this).parent().css('color','black');
            }
            else
            {
                 $(this).parent().css('color','red');
            }
        });  
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div>
    <p style="color: red; font-weight: bold;">I have read and agree to the terms and conditions
    <input type="checkbox" id="termsChkbx" /></p>
</div>

Upvotes: -2

Related Questions