Javascript 选中单选按钮时更改图像

我正在制作一个表格来测量地毯的尺寸。表格中有一个单选按钮，用户可以选择地毯的类型。我想在选中单选按钮时，根据所选单选按钮更改地毯的图像

第一张图：选择地毯尺寸的单选按钮

第二幅图：根据所选单选按钮更换地毯

代码如下：

<form class="carpet-detail text-center container">
      <p class="text-center">Upload your carpet’s photo here :</p>
      <div class="upload-carpet">
        <div id="image-preview">
          <input id="image-upload" name="image" type="file">
        </div>
        <label for="image-upload" id="image-label">Choose File</label>
      </div>
      <p class="carpet-name">Carpet 1</p>
      <p>Choose your carpet shape :</p>
      <div class="carpet-shape">
        <div class="choose-carpet">
          <input checked class="radio-shape" id="carpet-shape-1" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-1">Rectangular</label>
        </div>
        <div class="choose-carpet">
          <input class="radio-shape" id="carpet-shape-2" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-2">Square</label>
        </div>
        <div class="choose-carpet">
          <input class="radio-shape" id="carpet-shape-3" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-3">Round</label>
        </div>
        <div class="choose-carpet">
          <input class="radio-shape" id="carpet-shape-4" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-4">Oval</label>
        </div>
      </div>
      <p>Please insert your carpet size :</p>
      <img alt="carpet rectangle" class="carpet-icon" height="116" src="img/icons/carpet-rectangle.svg" width="194">
      <div class="grid-x grid-padding-x carpet-size">
        <div class="small-6 cell text-left">
          <p>Width :</p>
        </div>
        <div class="small-6 cell text-right">
          <p>/sqft</p>
        </div>
        <div class="small-12 cell">
          <div class="input-group plus-minus-input">
            <div class="input-group-button">
              <button type="button" class="button circle" data-quantity="minus" data-field="quantity-width">
                <img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
              </button>
            </div>
            <input class="input-group-field" type="number" name="quantity-width" value="0">
            <div class="input-group-button">
              <button type="button" class="button circle" data-quantity="plus" data-field="quantity-width">
                <img src="img/icons/size-plus.svg" alt="minus" width="11" height="11">
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-x grid-padding-x carpet-size">
        <div class="small-6 cell text-left">
          <p>Length :</p>
        </div>
        <div class="small-6 cell text-right">
          <p>/sqft</p>
        </div>
        <div class="small-12 cell">
          <div class="input-group plus-minus-input">
            <div class="input-group-button">
              <button type="button" class="button circle" data-quantity="minus" data-field="quantity-length">
                <img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
              </button>
            </div>
            <input class="input-group-field" type="number" name="quantity-length" value="0">
            <div class="input-group-button">
              <button type="button" class="button circle" data-quantity="plus" data-field="quantity-length">
                <img src="img/icons/size-plus.svg" alt="plus" width="11" height="11">
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>

将地毯照片上传至此处：
选择文件
地毯1

选择您的地毯形状：

矩形的
广场
圆形的
椭圆形
请插入您的地毯尺寸：

宽度：

/平方英尺

长度：

/平方英尺

对于纯JavaScript，您可以使用

onchange

并为

img

标记设置不同的源。

您只需要一个JavaScript或jQuery事件侦听器

//jQuery version
$('#radio1').on('click', function() {
  $('#image1').attr('src', 'myNewImage.jpg');
});

//Vanilla JavaScript
document.getElementById('radio1').addEventListener('click', null,
  function() {
    document.getElementsById('radio1').setAttribute('src', 'myNewImage.jpg');
});

---

显然，您需要为每个单选按钮添加一个。

您可以使用jquery的

.change

事件来完成此操作。 首先将属性

值

分配给收音机

<input class="radio-shape" value="Square" id="carpet-shape-2" name="carpet-shape" type="radio">

这是一份完整的工作报告

---

有关

change

事件的更多信息，请在事件上签出

您可以使用CSS选择器更改图像，如

~

，

+

通过这种方法，如果选中复选框，我们可以使用

~，+

选择器选择同级

然后我们可以将样式应用于选定的同级

在这里，我给出了代码片段和工作演示

CSS代码

       .output-shape {
            width: 200px;
            }
//Square
         #square ~  .output-shape{
                width: 200px;
           }
//Rectangle
          #rectangle:checked ~   .output-shape{
                    width: 280px;
           }
//Circle
          #circle:checked ~   .output-shape{
            border-radius: 50%;
            width: 200px;
           }

    // Input Field
        <input type="radio" name="radio" id="circle" checked>
        <input type="radio" name="radio" id="rectangle">
        <input type="radio" name="radio" id="square">

   // Label Field
        <label for="circle">circle</label>
        <label for="rectangle">Rectangle</label>
        <label for="square">square</label>

   // OUTPUT    
        <div class="output-shape"></div>

HTML代码

       .output-shape {
            width: 200px;
            }
//Square
         #square ~  .output-shape{
                width: 200px;
           }
//Rectangle
          #rectangle:checked ~   .output-shape{
                    width: 280px;
           }
//Circle
          #circle:checked ~   .output-shape{
            border-radius: 50%;
            width: 200px;
           }

    // Input Field
        <input type="radio" name="radio" id="circle" checked>
        <input type="radio" name="radio" id="rectangle">
        <input type="radio" name="radio" id="square">

   // Label Field
        <label for="circle">circle</label>
        <label for="rectangle">Rectangle</label>
        <label for="square">square</label>

   // OUTPUT    
        <div class="output-shape"></div>

CSS形状转换
圆圈
矩形
广场
您已选择

首先，您需要查看检查了哪些无线电输入，然后对图标图像进行一些更改以显示所需图像：我相信您正在寻找类似以下代码的内容，我尚未测试过，因此您可以 想稍微调整一下吗

$('.carpet-detail').on('click', 'input', changeImage);
// delegate the the listening to the form so you don't have
// to listen to every radio button, then filter only radio
function changeImage(evt){
// create a function that can receive the event object by
// providing a parameter
  var imageId = evt.target.id;
// store the id of the target element in var
  switch(imageId){
// a simple switch statement to see which radio was checked
    case 'carpet-shape-2':
    $('.carpet-icon').attr("src","carpet-shape-2.jpg");
    break;
// set the correct image for the chosen radio
    case 'carpet-shape-3':
    $('.carpet-icon').attr("src","carpet-shape-3.jpg");
    break;
    case 'carpet-shape-4':
    $('.carpet-icon').attr("src","carpet-shape-4.jpg");
    default:
    $('.carpet-icon').attr("src","default-image.jpg");
  }
}

---

在选择单选按钮时调用JS函数，并在JS函数内执行操作。其他人如何可以编辑我自己的答案？我是答案的作者，我不希望任何人编辑它！真是胡说八道！这种事情在很多国家都是完全违法的，或者至少应该如此！