收听要检查的单选按钮

问题描述

我有一个提交表单，要求至少检查一个单选按钮。我已经有一个代码来获取单选按钮的值：

let myQuery = document.querySelector('input[name="#myName"]:checked').value;

如果此方法返回任何值（它是文本字符串），那么我可以这样做：

document.getElementById("#ButtonID").removeAttribute("disabled");

我的提交按钮当前处于“禁用”状态，因此删除属性非常适合让用户在选中单选按钮后提交。

如何将其添加到此querySelector中？我已经从用户按下的单选按钮的.value中获取了一组变量。

非常感谢：）

解决方法

由于您未提供html模板，因此我假设是这样的：

let input = document.querySelector('input[name="Name"]');

input.addEventListener("change",() => {
 console.log(input.value)
 document.getElementById("ButtonId").removeAttribute("disabled");
});

<form>
  <p>Please click on the Name:</p>
  <fieldset>
    <input type="radio" name="Name" value="Name">
    <label for="Name"> Name</label> 
  </fieldset>
  
  <button id="ButtonId" disabled>
    Submit
  </button>
</form>

因此，您正在寻找的是addEventListener。

,

在其他答案的基础上，我们可以创建一个表单，其中默认情况下未选择任何单选按钮，但提交表单时需要进行选择：

HTML：

<h1>test form</h1>
<form>
  <div>
    <label>
      <input type="radio" name="a-radio-group" value="first" />
      first
    </label>
    <label>
      <input type="radio" name="a-radio-group" value="second" />
      second
    </label>
    <label> 
      <input type="radio" name="a-radio-group" value="third" />
      third
    </label>
  </div>
  <div>
    <button id="button" disabled>submit</button>
  </div>
</form>

JS：

document.querySelector('form')
  .addEventListener('click',function(event) {
      const checkedRadioInputs =
        document.querySelectorAll('input[name="a-radio-group"]:checked');

        if(checkedRadioInputs.length) {
          document
            .querySelector('button')
            .removeAttribute('disabled');
        }
    }
  );

您可能已经具备了一些功能，但是我想详细说明三个部分：

• 首先，单选按钮应在组中使用，并且该组中的所有单选按钮都必须具有相同的“名称”属性。使用此选项后，如果用户选择一个选项，它将“取消选中”所有其他单选选项并“选中”新选择的选项。有关radio buttons的更多信息。
• 我要在父表单元素上设置一个“单击”侦听器，以便我们可以监视整个表单的更改。如果没有父表单元素，则必须向每个单选输入添加onChange处理函数并跟踪状态。我认为表单方式更简单，并且在可能的情况下会避免使用后一种方式。
• 如果使用querySelectorAll，则将返回一个数组，您可以针对数组的长度进行测试：如果长度为0，则不会选择任何内容。有关querySelectorAll的更多信息。

,

通常，作为单选按钮的正常使用，我们默认选择1个按钮。 但是，如果您不希望一开始就选择它，

function hello() {
            // body...
            let button1 = document.getElementsByName("a").checked;
            console.log(button1);

            document.getElementById("gn").disabled=false;
        }

<form>
        <input type="radio" value="a" name="a" onclick="hello()">daknd<br>
        <input type="radio" value="b" name="a" onclick="hello()">hmm
        
        <button id="gn" type="submit" disabled>hmm</button>
    </form>

,

您的代码正确，您在getElementById（）方法中使用'＃'犯了一个错误。 我们需要在jQuery中使用“＃”符号，但在javascript中，它仅使用ID名称。

document.getElementById("#ButtonID").removeAttribute("disabled");



<script>

function checkStatus(obj)
{
  
  if(obj.value != "")
  {
     document.getElementById("button").removeAttribute("disabled");
  }
}

</script>


<form id="" name="" action="" method="">

       <li><input type="radio" name="a" id="RAD_1" value="RAD_1" 
       onclick="checkStatus(this);">Hello 1</input></li>

       <li><input type="radio" name="a" id="RAD_2" value="RAD_2" 
      onclick="checkStatus(this);">Hello 2</input></li>

      <li><input type="submit" name="submit" id="button" value="Submit" disabled> 
</input>
</form>