Javascript change of color with checkbox - Stack Overflow

admin管理员组

文章数量:1401673

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

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

• javascript

Share Improve this question Follow edited Nov 30, 2015 at 15:32 Doran L asked Nov 30, 2015 at 15:26 Doran LDoran L 29933 gold badges55 silver badges1919 bronze badges 2

• "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 Commented Nov 30, 2015 at 15:30
• Sorry, yes i'm just asking if it can be done without external libraries. – Doran L Commented Nov 30, 2015 at 15:32

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

You could use:

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

jsFiddle example

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

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

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>

Pure javascript:

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

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

本文标签： Javascript change of color with checkboxStack Overflow