【问题标题】：Exposing Additional Form Fields via Checked Radio Buttons in html and css通过 html 和 css 中选中的单选按钮公开其他表单字段
【发布时间】：2017-04-06 16:20:34
【问题描述】：

我有两个单选按钮，一个用于信用卡，一个用于借记卡。如果我按下我的任何一个单选按钮，我应该会得到一张用于贷记和借记的表格。

当前代码

<div class="forcredit">
  <label>Card no:</label>
  <input type="text" name="cardno" required=""><span style="color: red;">*</span>
  <label>CVV no:</label>
  <input type="text" name="cvvno" required=""><span style="color: red;">*</span>
  <label>Expiration MM/YYYY</label>
  <input type="month" name="expire" required=""><span style="color: red;">*</span>
</div>

但问题是，当我按下单选按钮时，我无法显示其他表单。

我的整个代码：

<!DOCTYPE html>
<html>
<head>
    <title>form</title>
</head>
<body>
  <form method="post" action="#">
  
  <h4>Payment type:</h4>
  <div>
    <div>
      <input type="radio" name="credit" id="credit" required>
      <label>Credit card</label>
    
      <div class="forcredit">
      <label>Card no:</label>
      <input type="text" name="cardno" required=""><span style="color: red;">*</span><br>
      <label>CVV no:</label>
      <input type="text" name="cvvno" required=""><span style="color: red;">*</span><br>
      <label>Expiration MM/YYYY</label>
      <input type="month" name="expire" required=""><span style="color: red;">*</span><br>
      </div>
    </div>
    
    <div>
      <input type="radio" name="debit" id="debit">
      <label>Debit card</label>
    
      <div class="fordebit">
      <label>Card no:</label>
      <input type="text" name="cardno" required=""><span style="color: red;">*</span><br>
      <label>CVV no:</label>
      <input type="text" name="cvvno" required=""><span style="color: red;">*</span><br>
      <label>Expiration MM/YYYY</label>
      <input type="month" name="expire" required=""><span style="color: red;">*</span><br>
      </div>
    </div>
  </div>
  <div>
    <input type="submit" value="Pay">
  </div>
  </form>
</body>
</html>

任何人都可以修改 CSS 文件，以便在我按下单选按钮时显示类似类型的表单吗？

【问题讨论】：

你的 CSS 在哪里？请更新您的问题以包含它。

标签： javascript jquery html css forms

【解决方案1】：

基本上你需要在你的 CSS 中添加 :checked 状态来显示下一个兄弟

  input[type=radio] + .fordebit,
  input[type=radio] + .forcredit{
    display:none;
  }
  input[type=radio]:checked + .fordebit{
     display:block;
  }
  input[type=radio]:checked + .forcredit{
     display:block;
  }

更新

好的，这是更新。你的html也有一些问题。如果您想对多项选择项使用单选按钮，它们应该具有相同的名称。请参阅下面的完整工作代码

input[type=radio] + .details{
  display: none;
}

input[type=radio]:checked + .fordebit {
  display: block;
}

input[type=radio]:checked + .forcredit {
  display: block;
}
input[type=radio] {
  float:left;
}

<form method="post" action="#">

  <h4>Payment type:</h4>
  <div>
    <div>
      <label>Credit card</label>
      <input type="radio" name="payment_type" id="credit" required>

      <div class="forcredit details">
        <label>Card no:</label>
        <input type="text" name="cardno" required=""><span style="color: red;">*</span>
        <br>
        <label>CVV no:</label>
        <input type="text" name="cvvno" required=""><span style="color: red;">*</span>
        <br>
        <label>Expiration MM/YYYY</label>
        <input type="month" name="expire" required=""><span style="color: red;">*</span>
        <br>
      </div>
    </div>

    <div>
      <label>Debit card</label>
      <input type="radio" name="payment_type" id="debit">

      <div class="fordebit details">
        <label>Card no:</label>
        <input type="text" name="cardno" required=""><span style="color: red;">*</span>
        <br>
        <label>CVV no:</label>
        <input type="text" name="cvvno" required=""><span style="color: red;">*</span>
        <br>
        <label>Expiration MM/YYYY</label>
        <input type="month" name="expire" required=""><span style="color: red;">*</span>
        <br>
      </div>
    </div>
  </div>



  <div>
    <input type="submit" value="Pay">
  </div>

【讨论】：

但我使用的是 sublime text :checked 在 @guyfawkes 中不起作用
非常困惑。你正在使用 Sublime Text 编写代码，Sublime Text 不是浏览器

【解决方案2】：

CSS 无法做到这一点。事件捕获需要 Javascript。使用 jquery 之类的库，您需要将 click 事件处理程序附加到卡片选择器单选按钮。仔细检查您的单选按钮名称，然后您将需要以下内容：

$('.card').click(function() {
  $('.forcredit').show();
});

【讨论】：

您可以通过 :checked css 选择器启用兄弟姐妹。
CSS 肯定可以做到这一点。另外，当普通的日常 JavaScript 可以完成这项工作时，为什么要产生 JQuery 的开销？