Question

如果单选按钮被选中，我想做一些事情，如果没有选中，我想做其他事情。如果检查单选按钮工作正常但 else 语句不起作用，而且我不想使用 ("if-else" ) 语句说如果检查另一个单选按钮做某事，我只想要 else 语句如果未选中单选按钮 1，则执行某些操作

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="radio" name="layerButton" value="UnTiled" id="raster" >Raster Layer
    <script>
        var radio = document.getElementById('raster');
        radio.addEventListener('click', function() {
        if (this.checked) {
         alert("Checkbox is checked..");
        }else{
            alert("Checkbox is not checked..");
        }
});
        
    </script>
</body>
</html>

Answer 1

您需要为两个输入添加一个包装器，并将侦听器添加到其中。然后根据每个 checked 的 input 状态，您可以决定要做什么。

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <div id="wrapper">
      <input type="radio" name="layerButton" value="UnTiled" id="raster">Raster Layer
      <input type="radio" name="layerButton" value="vactor" id="vector"> Vector Layer
    </div>

    <script>
      var wrapper = document.getElementById('wrapper');
      wrapper.addEventListener('click', function(ev) {
        if (ev.target.nodeName === 'INPUT') {
          if (document.querySelector('#raster').checked) {
            console.log('raster checked');
          } else {
            console.log('raster not checked');
          }
          
          if (document.querySelector('#vector').checked) {
            console.log('vector checked');
          } else {
            console.log('vector not checked');
          }
        }

      });

    </script>
  </body>

</html>

Answer 2

您需要为每个单选按钮添加事件侦听器，并且在更改值时，您可以根据需要比较单选按钮的值执行操作

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="radio" name="layerButton" value="UnTiled" id="raster" >Raster Layer
    <input type="radio" name="layerButton" value="vactor" id="raster" > Vector Layer
    <script>
    var radio = document.querySelectorAll('[name=layerButton]');
    for(let i = 0; i < radio.length; i++){
        radio[i].addEventListener('change', function() {
          if (this.value === "UnTiled") {
            alert("Checkbox is checked..");
          }else{
            alert("Checkbox is not checked..");
          }
        });
    }
        
    </script>
</body>
</html>

Answer 3

你可以试试这个

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="radio" name="layerButton" value="UnTiled" id="raster" >Raster Layer
    <script>
    
        var radio = document.getElementById('raster');
      if (!this.checked) {
            alert("Checkbox is not checked..");
        }
        
        radio.addEventListener('change', function() {
        if (this.checked) {
         alert("Checkbox is checked..");
        }else{
            alert("Checkbox is not checked..");
        }
});
        
    </script>
</body>
</html>

我刚刚在事件处理程序之外添加了未选中无线电的警报条件

如果未使用 js 检查单选按钮，则执行某些操作

3 个答案: