Question

我在这里有一个javascript，当复选框被选中时，它可以改变颜色，但它必须依赖于使用外部库才能工作。是否有可能不使用外部库，如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');
        }
    });

Answer 1

您可以使用：

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

<强> jsFiddle example

Answer 2

是的，这可以在不需要库的情况下完成。一个相当直接的翻译是这样的：

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

或者像这样短一点：

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

Answer 3

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

编写一个简单的JS函数：

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

这确实将JS代码放在HTML标记中，这不是更好的选择，但这适用于不支持DOMContentLoaded事件的旧浏览器。如果您只定位现代浏览器，则可以使用 ActionListener 。

Answer 4

试，

＆＃13;

function isChecked(){

  var chk = document.getElementById("termsChkbx");
  if(chk.checked){
     chk.parentElement.style.color  = "black";
  }
  else{
     chk.parentElement.style.color  = "red";
  }
}

＆＃13;

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

＆＃13;

Answer 5

纯javascript：

DescribeInstancesRequest

Answer 6

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript更改颜色与复选框

6 个答案: