我想强迫某人至少点击一个收音机

I want to force someone to click atleast one radio

本文关键字：收音机 一个 某人      更新时间：2023-09-26

我怎样才能使消息出现(如果它可以像需要关闭文本区和输入，但如果不是，那就好了)，如果这个人没有选择3个单选按钮选项之一?

<div class = "radio" required="required">
<h3 style = "margin-top:-20px;">Meaningless text.</h3>
<label for="x"><input type="radio" name="x" id = "x" /> <span>ex.1</span></label><br>
    <label for="y"><input type="radio" name="x" id = "x" /> <span>ex.2</span></label><br>
    <label for="z"><input type="radio" name="x" id = "x" /> <span>ex.3</span></label>
</div>

如果我理解正确的话，您希望在页面中呈现表单时不选择单选按钮选项，并且希望强制用户选择其中一个单选按钮选项。这里有一小段代码使用jquery(我修改了你的标记)

<div class="radio">
  <h3>Meaningless text.</h3>
  <input type="radio" name="radio-option" id="x" /> <label for="x">ex.1</label><br />
  <input type="radio" name="radio-option" id="y" /> <label for="y">ex.2</label><br />
  <input type="radio" name="radio-option" id="z" /> <label for="z">ex.3</label><br />
  <span></span>
  <br />
  <button style="margin-top: 10px" id="submit-button">Submit</button>
</div>

下面是使用jquery的JavaScript:

$(function () {
  $('#submit-button').on('click', function (e, ui) {
    var valid = false,
        $options = $('.radio input[name=radio-option]'),
        $message = $('.radio span');
    $options.each(function (index) {
        var checked = $(this).prop('checked');
        //alert($(this).prop('checked'));
        if (checked) {
            valid = true;
            return false;
        }
    });
    if (valid) {
        $message.text('');
    }
    else {
        $message.text('Choose at least one option');
    }
  });
});

如果你想要一个纯JS解决方案，你当然可以不使用jquery实现同样的效果(我现在没有代码:)如果你不反对使用jquery解决方案，OPatel提到使用jquery验证插件，这也不是一个坏的选择。

如果您能够使用选择而不是单选按钮，您还可以减少所需的JavaScript的总数量。下面是该代码的一个示例:

<div class="radio">
  <h3>Meaningless text.</h3>
  <select>
    <option value="">Select an Option</option>
    <option value="1">ex.1</option>
    <option value="2">ex.2</option>
    <option value="3">ex.3</option>
  </select>
  <br />
  <span></span>
  <br />
  <button style="margin-top: 10px" id="submit-button">Submit</button>
</div>
$(function () {
  $('#submit-button').on('click', function (e, ui) {
    var value = $('.radio select').val(),
        $message = $('.radio span');
    if (value) {
        $message.text('');
    }
    else {
        $message.text('Choose at least one option');
    }
  });
});
相关文章：