侦听要检查的单选按钮

Question

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

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

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

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

我目前“禁用”了提交按钮，因此删除该属性可以完美地允许用户在选中单选按钮后提交。

如何将它输入到这个 querySelector 中？我已经从用户按下的单选按钮的 .value 中获取了一组变量。

非常感谢:)

Answer 1

由于您没有提供 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。

Answer 2

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

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。

Answer 3

通常，作为单选按钮的正常使用，我们默认选择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>

Answer 4

您的代码是正确的，您在 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>