Question

我有一个供用户使用的输入表单，该表单以3个单选按钮开头。这些单选按钮如下所示：

<input type="radio" name="customer" id="customer" value="A customer">Customer<br>
<input type="radio" name="customer" id="client" value="A client">Customer<br>
<input type="radio" name="customer" id="other" value="Other">Customer<br>

然后我有7个不同的输入字段，输入之一是：

<input type="text" placeholder="bla bla" name="referenceno">

然后我有一个“提交”按钮，其格式如下：

<button type="submit">Login</button>

例如，如果用户选择“客户”，那么我希望将某些输入设置为“必填”值（例如referenceno），因此，如果未输入这些字段，那么用户将无法在不输入正确信息的情况下按登录。

Answer 1

单选按钮的更改使用document.querySelector并使用setAttribute将输入设置为元素所需的属性

function a()
{
document.querySelector('.one').setAttribute('required','required');
document.querySelector('.five').setAttribute('required','required');

}

<input type="radio" name="customer" id="customer" onchange='a()' value="A customer">Customer<br>
<input type="radio" name="customer" id="client" value="A client">Customer<br>
<input type="radio" name="customer" id="other" value="Other">Customer<br>


<input type="text" placeholder="bla bla" name="referenceno" class='one'>
<input type="text" placeholder="bla bla" name="referenceno" class='2'>
<input type="text" placeholder="bla bla" name="referenceno" class='3'>
<input type="text" placeholder="bla bla" name="referenceno" class='4'>
<input type="text" placeholder="bla bla" name="referenceno" class='five'>
<input type="text" placeholder="bla bla" name="referenceno" class='5'>
<input type="text" placeholder="bla bla" name="referenceno" class='7'>

Answer 2

您可以通过匹配单选按钮的ID将类添加到输入元素。然后单击按钮，添加具有该类名称的 required 属性：

var radio = [].slice.call(document.querySelectorAll('[name=customer]'));
radio.forEach(function(r){
  r.addEventListener('click', function(){
    var allInput = document.querySelectorAll('[type="text"]');
    [].slice.call(allInput).forEach(function(el){
      el.required = false;
    });
    document.querySelector('.'+this.id).required = true;
  });
});

<form>
  <input type="radio" name="customer" id="customer" value="A customer">Customer<br>
  <input type="radio" name="customer" id="client" value="A client">Customer<br>
  <input type="radio" name="customer" id="other" value="Other">Customer<br>

  <input type="text" placeholder="bla bla" name="referenceno" class="customer">
  <input type="text" placeholder="bla bla" name="referenceno" class="client">
  <input type="text" placeholder="bla bla" name="referenceno" class="other">

  <button type="submit">Login</button>
</form>

Answer 3

<form id="my-form">
  <input type="radio" name="customer" id="customer" value="A customer">Customer<br>
  <input type="radio" name="customer" id="client" value="A client">Client<br>
  <input type="radio" name="customer" id="other" value="Other">Other<br>

  <input type="text" placeholder="reference no" name="referenceno">
  <input type="text" placeholder="other field" name="other-field">

  <button type="submit">Submit</button>
</form>

let selectedCustomer = null;

const onCustomerSelected = (value) => {
  if (selectedCustomer === value) {
    return;
  }
  selectedCustomer = value;
  updateOnCustomerChanged();
};

const updateOnCustomerChanged = () => {
  const referenceNoInputField = document.querySelector('input[name=referenceno]');
  referenceNoInputField.required = selectedCustomer === 'A customer';
};

document.querySelectorAll('[name=customer]')
  .forEach((el) => {
    el.addEventListener('change', () => {
      onCustomerSelected(el.value);
    });
  });

Answer 4

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  background-color: black;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body id="container_id">
<form>
    <input type="radio" name="customer" id="customer" value="A customer">Customer<br>
  <input type="radio" name="customer" id="client" value="A client">Customer<br>
  <input type="radio" name="customer" id="other" value="Other">Customer<br>

  <input type="text" placeholder="bla bla" name="referenceno" class="customer">
  <input type="text" placeholder="bla bla" name="referenceno" class="client">
  <input type="text" placeholder="bla bla" name="referenceno" class="other">

  <button type="submit">Login</button>
</form>
<script>
    var radio = document.querySelectorAll('[name=customer]');
  radio.forEach(function(r){
  r.addEventListener('click', function(){
    var x = document.querySelectorAll("input[type='text']");
    var i;
    for (i = 0; i < x.length; i++) {
      x[i].required = false;
    }
    document.querySelector('.'+this.id).required = true;
  });
});
</script>
</body>

</html>

在选择某个单选按钮时，在所需的表单上进行某些输入

4 个答案: