Question

我是javascript和html的新手。我正在尝试编写一个页面，根据单选按钮显示正确的表单。我想根据单选按钮的选择显示一个表单。我不确定我是否正在使用javascript函数选择正确的东西。我试图将它除以div，但我不知道为什么它不起作用......这就是我到目前为止所拥有的：

$(document).ready(function() {
  $('input[name=select]:radio').click(function() {
    if ($(this).attr("value") == "Yes") {
      $('form[name="Computerform"]').hide();
      $('form[name="VMform"]').show();
    }
    if ($(this).attr("value") == "No") {
      $('form[name="Computerform"]').hide();
      $('form[name="VMform"]').show();
    }


  });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<body>

  <div id="main">
    <form name="select">
      <input type="radio" name="A" value="No">Yes
      <br>
      <input type="radio" name="A" value="Yes">No
    </form>

    <div id="first">
      <form action="process.php" name="Computerform" method="get">
        <strong>First Name: </strong>
        <input type="text" name="firstName" placeholder="Your Name" id="firstName" />
        <strong>First Name: </strong>
        <input type="text" name="LastName" placeholder="Your Last Name" id="LastName" />
      </form>
    </div>

    <div id="second">
      <form action="process.php" name="VMform" method="get">
        <strong>Favorite Color: </strong>
        <select name="color" id="color">
          <option value="">Select a Color</option>
          <option value="Red">Red</option>
          <option value="Green">Green</option>
          <option value="Blue">Blue</option>
        </select>
      </form>
    </div>
  </div>

</body>

有人可以解释一下，我将如何更改代码来执行此操作？我只想根据用户在第一种形式（收音机底座）中选择的内容来显示一个表格。谢谢！

Answer 1

<强> HTML：

<div>
    <button  type="button">Click here</button>

    <div class="form-computer">
        <form action="process.php" name="Computerform" method="get">   
            <strong>First Name: </strong>
            <input type="text" name="firstName" placeholder="Your Name" id="firstName"/>
            <strong>First Name: </strong>
            <input type="text" name="LastName" placeholder="Your Last Name" id="LastName"/> 
        </form>
    </div>
    <div>
        <form action="process.php" name = "VMform" method="get">
            <strong>Favorite Color: </strong>
            <select name="color" id="color">
            <option value="">Select a Color</option>
            <option value="Red">Red</option>
            <option value="Green">Green</option>
            <option value="Blue">Blue</option>
            </select>
        </form>
    </div>
</div>

<强> JS：

$('button').on('click', function() {
    $('.form-computer').toggle("slow");
})

Answer 2

您可以为包含单选按钮的表单提供ID并将其定位在jquery中：JS Fiddle

$(document).ready(function () {
    $("#formID input").click(function () {
        if ($(this).attr("value") == "Yes") {
            $('form[name="Computerform"]').hide();
            $('form[name="VMform"]').show();
        }
        if ($(this).attr("value") == "No") {
            $('form[name="Computerform"]').show();
            $('form[name="VMform"]').hide();
        }
    });
});

在评论中回答问题。用CSS隐藏一个表单：

form[name="VMform"] {display: none;}

另外，我在底部交换了hide / show。我假设＆＃34;不＆＃34;应该做什么时候＆＃34;是＆＃34;点击。

Answer 3

HTML：

<div id = "main">
    <form name="select">
        <input type="radio" name="A" value="1">show first form<br>
        <input type="radio" name="A" value="2">show second form 
    </form> 

    <div id = "first">
        <form action="process.php" name="Computerform" method="get">   
            <strong>First Name: </strong>
            <input type="text" name="firstName" placeholder="Your Name" id="firstName"/>
            <strong>First Name: </strong>
            <input type="text" name="LastName" placeholder="Your Last Name" id="LastName"/> 
        </form>
    </div>

    <div id = "second">
        <form action="process.php" name = "VMform" method="get">
            <strong>Favorite Color: </strong>
            <select name="color" id="color">
            <option value="">Select a Color</option>
            <option value="Red">Red</option>
            <option value="Green">Green</option>
            <option value="Blue">Blue</option>
            </select>
        </form>
    </div>
</div>

jQuery的：

$('form[name="select"] :radio').each(function(){
    $(this).click(function(){
        if($(this).attr("value")=="1"){
            $('#first').show();
            $('#second').hide();
        }
        else if($(this).attr("value")=="2"){
            $('#first').hide();
            $('#second').show();
        }
    });
});

CSS：

#first, #second{display:none;}

请参阅演示：http://jsfiddle.net/abrhmcc/poze8vj0/3/

Answer 4

$(document).ready(function() {
  $('[name="A"]').click(function() {
    if ($(this).val() == "Yes") {
      $('form[name="Computerform"]').hide();
      $('form[name="VMform"]').show();
    }
    if ($(this).val() == "No") {
      $('form[name="VMform"]').hide();
      $('form[name="Computerform"]').show();
    }
    
  });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<body>

  <div id="main">
    <form name="select">
      <input type="radio" name="A" value="No">Yes
      <br>
      <input type="radio" name="A" value="Yes">No
    </form>

    <div id="first">
      <form action="process.php" name="Computerform" method="get">
        <strong>First Name: </strong>
        <input type="text" name="firstName" placeholder="Your Name" id="firstName" />
        <strong>First Name: </strong>
        <input type="text" name="LastName" placeholder="Your Last Name" id="LastName" />
      </form>
    </div>

    <div id="second">
      <form action="process.php" name="VMform" method="get">
        <strong>Favorite Color: </strong>
        <select name="color" id="color">
          <option value="">Select a Color</option>
          <option value="Red">Red</option>
          <option value="Green">Green</option>
          <option value="Blue">Blue</option>
        </select>
      </form>
    </div>
  </div>

</body>

Answer 5

像这样放HTML：

<div id = "main">
<form name="select">
    <input type="radio" name="A" value="Yes">Show the first form<br>
    <input type="radio" name="A" value="No">Show the second form 
</form> 

<div id = "first">
    <form action="process.php" name="Computerform" method="get">   
        <strong>First Name: </strong>
        <input type="text" name="firstName" placeholder="Your Name" id="firstName"/>
        <strong>First Name: </strong>
        <input type="text" name="LastName" placeholder="Your Last Name" id="LastName"/> 
    </form>
</div>

<div id = "second">
    <form action="process.php" name = "VMform" method="get">
        <strong>Favorite Color: </strong>
        <select name="color" id="color">
        <option value="">Select a Color</option>
        <option value="Red">Red</option>
        <option value="Green">Green</option>
        <option value="Blue">Blue</option>
        </select>
    </form>
</div>

JS就像这样：

$('form[name="select"] :radio').each(function(){
$(this).click(function(){
    if($(this).attr("value")=="Yes"){
        $('#first').show();
        $('#second').hide();

    }
    if($(this).attr("value")=="No"){
        $('#first').hide();
        $('#second').show();
    }
});
});

Answer 6

使用更改而非点击。 val（）方法也是获取当前值（value属性！= value属性）。奖金：您可以使用更短的版本来切换div：）

$('input[name="test"]').change( function() {
    $('#toggle').toggle( $(this).val() === 'yes');
});

Fiddle

Answer 7

试试这个

$(document).ready(function(){
    $('form[name="VMform"]').hide();
    $('#r1').click(function(){
            $('form[name="Computerform"]').hide();
            $('form[name="VMform"]').show();
    });

    $('#r2').click(function(){
            $('form[name="Computerform"]').show();
            $('form[name="VMform"]').hide();
    });

实施例： http://jsfiddle.net/few5bm0u/

看起来哟总是隐藏着同一个。

Answer 8

因为您不熟悉JavaScript和HTML（我假设您想学习）有很多很棒的库，比如JQuery，UnderscoreJs和像AngulerJS和Backbone这样的框架可以让生活变得更轻松。

但更有趣的是使用纯HTML，CSS和Javascript，这将使您更好地理解DOM的工作原理。这些库支持浏览器之间的兼容性并简化某些任务。

现在让我们将它应用于您的示例： http://jsfiddle.net/m6s6a63n/

CSS：

.myforms.no { display: block; }
.myforms.no .yes { display: none; }

.myforms.yes { display: block; }
.myforms.yes .no { display: none; }

JS：

window.addEventListener('load', function () {
   var elements = document.querySelectorAll('form[name=select] input[type=radio]');
   var myforms = document.querySelector('.myforms');

   [].forEach.call(elements, function (element) {
      element.addEventListener('click', function () {
          myforms.setAttribute('class', 'myforms ' + this.value);
      })
   });
});

HTML：

<div class="myforms">
<form name="select">
    <input type="radio" name="A" value="no">Yes</input><br>
    <input type="radio" name="A" value="yes">No</input>
</form>

<div class="yes">
    <form action="process.php" name="Computerform" method="get">
        <strong>First Name: </strong>
        <input type="text" name="firstName" placeholder="Your Name" id="firstName" />
        <strong>First Name: </strong>
        <input type="text" name="LastName" placeholder="Your Last Name" id="LastName" />
    </form>
</div>

<div class="no">
    <form action="process.php" name="VMform" method="get">
        <strong>Favorite Color: </strong>
        <select name="color" id="color">
            <option value="">Select a Color</option>
            <option value="Red">Red</option>
            <option value="Green">Green</option>
            <option value="Blue">Blue</option>
        </select>
    </form>
</div>

Jquery在两种形式之间进行选择

8 个答案: