Question

所以我遇到了一个小问题。我正在制作一个根据用户需求而变化的联系表格。

这是我的HTML代码。我的目标是首先使用第一组raio按钮隐藏大部分内容。我实际上设法用这个Javascript来实现：

＆＃13;

$(function() {
  $('#report').on('click', function() {
    if ($(this).is(':checked')) {
      $('#phonenumber').hide();
      $('#dateofplay').hide();
      $('#customertype').hide();
      $('#studentprices').hide();
      $('#privateprices').hide();
      $('#companyprices').hide();
      $('#customsetup').hide();
    } else {
      $('#phonenumber').show();
      $('#dateofplay').show();
      $('#customertype').show();
      $('#studentprices').show();
      $('#privateprices').show();
      $('#companyprices').show();
      $('#customsetup').show();
    }
  })
  $('#booking').on('click', function() {
    if ($(this).is(':checked')) {
      $('#phonenumber').show();
      $('#dateofplay').show();
      $('#customertype').show();
      $('#studentprices').show();
      $('#privateprices').show();
      $('#companyprices').show();
      $('#customsetup').show();
    } else {
      $('#phonenumber').hide();
      $('#dateofplay').hide();
      $('#customertype').hide();
      $('#studentprices').hide();
      $('#privateprices').hide();
      $('#companyprices').hide();
      $('#customsetup').hide();
    }
  })
  $('#student').on('click', function() {
    if ($(this).is(':checked')) {
      $('#privateprices').hide();
      $('#companyprices').hide();
    } else {
      $('#privateprices').show();
      $('#companyprices').show();
    }
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="main" class="ui-content" align="center">
  <div class="ui-content-spacer">
    <h3 class="ui-bar ui-bar-a ui-corner-all ui-content-spacer">
      Booking Form
    </h3>
    <div class="ui-body ui-body-a ui-corner-all ui-content-spacer">
      <form method="post" action="">
        <div class="form-field-contain">
          <fieldset data-role="controlgroup">
            <legend>While the page is still under developement please define your inquiry: </legend>
            <input type="radio" name="settings" id="report" value="report">
            <label for="report">Bug Report</label>
            <input type="radio" name="settings" id="booking" value="booking" checked="checked">
            <label for="booking">Booking</label>
          </fieldset>
        </div>
        <div class="form-field-contain ui-field-contain">
          <label for="firstname">First Name:</label>
          <input type="text" name="firstname" id="firstname" value="" placeholder="First Name...">
        </div>
        <div class="form-field-contain ui-field-contain">
          <label for="lastname">Last Name:</label>
          <input type="text" name="lastname" id="lastname" value="" placeholder="Last Name...">
        </div>
        <div class="form-field-contain ui-field-contain">
          <label for="email">E-Mail</label>
          <input type="email" name="email" id="email" value="" placeholder="E-Mail...">
        </div>
        <div class="form-field-contain ui-field-contain" id="phonenumber">
          <label for="tel">Phone:</label>
          <input type="tel" name="tel" id="tel" value="" placeholder="Phone #...">
        </div>
        <div class="form-field-contain ui-field-contain" id="dateofplay">
          <label for="date">Date of event:</label>
          <input type="date" name="date" id="date" value="" placeholder="Please choose a Date">
        </div>
        <div class="form-field-contain ui-field-contain">
          <label for="message">Write a quick Message:</label>
          <textarea cols="40" rows="8" name="message" id="message" placeholder="Your Message here..."></textarea>
        </div>
        <div class="form-field-contain" id="customertype">
          <fieldset data-role="controlgroup">
            <label><input type="radio" name="customertype" id="student" value="Student/Apprentice">Stundent/Apprentice</label>
            <label><input type="radio" name="customertype" id="private" value="private" checked="checked">Private</label>
            <label><input type="radio" name="customertype" id="company" value="company">Company</label>
          </fieldset>
        </div>
        <div class="form-field-contain" id="studentprices">
          <fieldset data-role="controlgroup">
            <label><input type="radio" name="studentprice" id="studentminimal" value="studentminimal" checked="checked">Minimal</label>
            <label><input type="radio" name="studentprice" id="studentsoundonly" value="studentsoundonly">Sound Only</label>
            <label><input type="radio" name="studentprice" id="studentsoundandlight" value="studentsoundandlight">Sound and Light</label>
            <label><input type="radio" name="studentprice" id="studentpartypackage" value="studentpartypackage">Total Party Package</label>
            <label><input type="radio" name="studentprice" id="studentcustom" value="0">Custom</label>
          </fieldset>
        </div>
        <div class="form-field-contain" id="privateprices">
          <fieldset data-role="controlgroup">
            <label><input type="radio" name="privateprice" id="minimal" value="150" checked="checked">Minimal</label>
            <label><input type="radio" name="privateprice" id="soundonly" value="200">Sound Only</label>
            <label><input type="radio" name="privateprice" id="soundandlight" value="300">Sound and Light</label>
            <label><input type="radio" name="privateprice" id="partypackage" value="400">Total Party Package</label>
            <label><input type="radio" name="privateprice" id="custom" value="0">Custom</label>
          </fieldset>
        </div>
        <div class="form-field-contain" id="companyprices">
          <fieldset data-role="controlgroup">
            <label><input type="radio" name="companyprice" id="companyminimal" value="200" checked="checked">Minimal</label>
            <label><input type="radio" name="companyprice" id="companysoundonly" value="300">Sound Only</label>
            <label><input type="radio" name="companyprice" id="companysoundandlight" value="400">Sound and Light</label>
            <label><input type="radio" name="companyprice" id="companypartypackage" value="500">Total Party Package</label>
            <label><input type="radio" name="companyprice" id="companycustom" value="0">Custom</label>
          </fieldset>
        </div>
        <div class="form-field-contain" id="customsetup">
          <fieldset data-role="controlgroup" id="customsetup">
            <legend>Custom choices:</legend>
            <label><input type="checkbox" name="speakers" id="speakers" value="">Speakers</label>
            <label><input type="checkbox" name="subwoofer" id="subwoofer" value="">Subwoofer</label>
            <label><input type="checkbox" name="lighting" id="lighting" value="">Lighting</label>
            <label><input type="checkbox" name="strobe" id="strobe" value="">Strobelight</label>
            <label><input type="checkbox" name="fog" id="fog" value="">Fogmachine</label>
            <label><input type="checkbox" name="table" id="table" value="">Table</label>
          </fieldset>
        </div>
        <div class="form-field-contain">
          <input type="submit" name="submit" value="Submit" data-inline="true">
          <input type="reset" name="reset" value="Reset" data-inline="true">
        </div>
      </form>
    </div>
  </div>
</div>

＆＃13;

我认为问题在于，因为第一个显示/隐藏功能隐藏/显示ID，它会覆盖任何后续功能。我无法理解如何继续代码，因此隐藏了不需要的单选按钮。

所以，如果，

选择#student，隐藏#privateprices和#companyprices选项

选择#private，隐藏#studentprices和#companyprices选项

选择#company，隐藏#studentprices和#privateprices选项

它是否可能或者是否有更简单有效的方法来实现这一目标？特别是当我开始为表单创建php时？提前致谢

编辑：Javascript中的最后一段代码是我试图隐藏第一组radiobuttons。

Answer 1

您可以检查在页面加载中选择了哪个单选按钮并显示/隐藏面板。请看这里的工作小提琴：

https://jsfiddle.net/ranjitsachin/Leav016c/2/

$('#student').on('click', function() {
     if ($(this).is(':checked')) {
        $("#studentprices").show();
        $('#privateprices, #companyprices').hide();
   }
});
$('#private').on('click', function() {
    if ($(this).is(':checked')) {
        $("#privateprices").show();
        $('#studentprices, #companyprices').hide();
    }
});
 $('#company').on('click', function() {
    if ($(this).is(':checked')) {
        $("#companyprices").show();
       $('#studentprices, #privateprices').hide();
    }
});

Answer 2

这是一本关于如何做的工作笔。 http://codepen.io/anon/pen/jBryOa

在这支笔中，我将report-group和booking-group的类添加到相应的div中，为{c}添加了hide-group类，设置为{ {1}}然后根据选中的单选按钮添加和删除类display: none;。我还在html中将类hide-group添加到需要最初隐藏的div中。

我没有将组添加到每个div。足以告诉你你需要做什么。

显示/隐藏具有多个单选按钮和ID的ID

2 个答案: