Javascript change of color with checkbox

Question

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');
        }
    });

"Would it be possible for it to function () ?" I don't understand this. Are you asking how to do it without external libraries? Please edit your question to clarify. — user1106925
– user1106925, Commented Nov 30, 2015 at 15:30
Sorry, yes i'm just asking if it can be done without external libraries. — Doran L
– Doran L, Commented Nov 30, 2015 at 15:32

j08691 · Accepted Answer · 2015-11-30 15:33:10Z

4

You could use:

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

jsFiddle example

answered Nov 30, 2015 at 15:33

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Doran L Over a year ago

May I ask where did elem come from ?

j08691 Over a year ago

You passed it via this in isChecked(this. It refers to the checkbox being clicked on.

2 revs user1106925 · Accepted Answer · 2015-11-30 15:38:02Z

1

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);
});

edited Nov 30, 2015 at 15:38

community wiki

2 revs
user1106925

Comments

meskobalazs · Accepted Answer · 2015-11-30 15:32:44Z

0

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

answered Nov 30, 2015 at 15:32

meskobalazs

16.1k2 gold badges44 silver badges63 bronze badges

Comments

Azad · Accepted Answer · 2015-11-30 15:36:51Z

0

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>

answered Nov 30, 2015 at 15:36

Azad

5,2725 gold badges31 silver badges59 bronze badges

Comments

Jon L · Accepted Answer · 2015-11-30 16:33:57Z

0

Pure javascript:

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

edited Nov 30, 2015 at 16:33

answered Nov 30, 2015 at 15:47

Jon L

5692 gold badges9 silver badges17 bronze badges

Comments

Marcos Pérez Gude · Accepted Answer · 2015-11-30 15:32:40Z

-2

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>

answered Nov 30, 2015 at 15:32

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

2 Comments

jtsnr Over a year ago

The poster doesn't want to use external libraries

Marcos Pérez Gude Over a year ago

@jtsnr you are smarter than me, but when I answer OP doesn't said that. You are read that from a comment that not exists when I answer. Thank you for the downvote, if not yours, for the troll that downvote.

Collectives™ on Stack Overflow

Javascript change of color with checkbox

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related