使用複選框更改顏色的Javascript

我有一個JavaScript，可以在複選框被選中時更改顏色，但它必須依賴外部庫的使用才能工作。它可能不使用外部函數庫，如函數（）？使用複選框更改顏色的Javascript

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

來源

2015-11-30 Doran L

* 「是否有可能爲它的運行（）？」 *我不明白這一點。你問沒有外部圖書館怎麼做？請編輯你的問題來澄清。 –

對不起，是的，我只是問是否可以在沒有外部庫的情況下完成。 –

-2

試試這個：

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

來源

2015-11-30 15:32:40

海報不想使用外部庫 – jtsnr

@jtsnr你比我聰明，但是當我回答OP時並沒有這麼說。您從我評論時不存在的評論中讀到。謝謝你的讚譽，如果不是你的話，那麼這個巨魔就會失敗。 –

<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事件的舊瀏覽器。如果您只是針對現代瀏覽器，則需要採取行動路線圖。

來源

2015-11-30 15:32:44 meskobalazs

是的，這可以不需要庫來完成。一個相當直接的翻譯是這樣的：

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

來源

2015-11-30 15:32:44

你可以使用：

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

jsFiddle example

來源

2015-11-30 15:33:10 j08691

我可以問一下elem從哪裏來？ –

您在'isChecked（this'）中通過'this'傳遞它，它指向被點擊的複選框。 – j08691

嘗試，

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>

來源

2015-11-30 15:36:51 azad

純JavaScript：

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

來源

2015-11-30 15:47:36

使用複選框更改顏色的Javascript

回答

相關問題