单选按钮不改变背景颜色HTML/CSS

Radio button not changing background color HTML/CSS

本文关键字：HTML CSS 颜色 背景 改变 单选按钮      更新时间：2023-09-26

我正在尝试使用单选按钮改变背景颜色。javascript函数似乎不工作。我已经通读了写在这里的其他问题，这些答案似乎都不正确。

下面是HTML代码:

 <form action="">
    <input type="radio" name="color" value="radio"  onchange= "bgColor('colorR')">Red
    <input type="radio" name="color"  value="radio" onchange= "bgColor('colorG')"> Green
    <input type="radio" name="color"  value="radio" onchange= "bgColor('colorP')"> Purple
    <input type="radio" name="color"  value="radio" onchange= "bgColor('colorD')"> Default
</form>

Javascript:

 <script>
  function bgColor(col){
switch(col){
    case 'colorR':
        document.body.style.backgroundColor  = "red";
        break;
    case 'colorG':
         document.body.style.backgroundColor  = "green";
         break;
    case 'colorP'
          document.body.style.backgroundColor  = "purple";
          break;
    case 'colorD'
          document.body.style.backgroundColor  = "#d0e4fe";
          break;

     }
 }
 </script>

下面是页面首次启动时的CSS代码:

 body {
     background-color: #d0e4fe;
 }

您的代码不工作，因为您的函数名称是bgColor，我已将其重命名为bgcolor，您也在case 'colorP'和case 'colorD'之后缺少分号，现在工作正常。试试这个

 <form action="">
  <input type="radio" name="color" value="radio"  onchange= "bgcolor('colorR')"> Red
  <input type="radio" name="color"  value="radio" onchange= "bgcolor('colorG')"> Green
  <input type="radio" name="color"  value="radio" onchange= "bgcolor('colorP')"> Purple
  <input type="radio" name="color"  value="radio" onchange= "bgcolor('colorD')"> Default
</form>

JavaScript函数

 <script>
  function bgcolor(col){
    switch(col){
      case 'colorR':
        document.body.style.backgroundColor  = "red";
        break;
      case 'colorG':
        document.body.style.backgroundColor  = "green";
        break;
      case 'colorP' :
        document.body.style.backgroundColor  = "purple";
        break;
      case 'colorD':
        document.body.style.backgroundColor  = "#d0e4fe";
        break;
    }
 };
</script>
css

和

 body {
   background-color: #d0e4fe;
 }


$('input:radio').click(function() {
  var color = $(this).val();
  $('body').css("background-color", color);
});
 body {
   background-color: #d0e4fe;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input type="radio" name="color" value="red">Red
  <input type="radio" name="color" value="green">Green
  <input type="radio" name="color" value="purple">Purple
  <input type="radio" name="color" value="#d0e4fe">Default
</form>

相关文章：