Question

我正在尝试使用单选按钮更改背景颜色。 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;
 }

Answer 1

您的代码无效，因为您的函数名称为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;
 }

Answer 2

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

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

2 个答案: