堆栈内存溢出
  繁体   English   中英

jQuery在两种形式之间选择

[英]Jquery select between two forms

 原文  2014-10-03 19:11:29  8   8    javascript/ jquery/ html

问题描述

我是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>

有人可以解释一下，我将如何更改代码以实现此行为？ 我只想显示一个表格，具体取决于用户在第一个表格中选择的内容（无线电按钮）。 谢谢！

8 个解决方案

解决方案1
 1  2014-10-03 20:04:57

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");
})

解决方案2
 0  2014-10-03 19:22:37

您可以为包含单选按钮的表单提供一个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;}

另外，我在底部交换了隐藏/显示。 我以为“否”应该与单击“是”时相反。

解决方案3
 0  2014-10-03 19:23:37

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/

解决方案4
 0  2014-10-03 19:27:49

 $(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>

解决方案5
 0  2014-10-03 19:28:08

将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();
    }
});
});

解决方案6
 0  2014-10-03 19:28:10

使用更改而不是单击。 val（）方法也是获取当前值（值属性！=值属性）。 还有一点好处：您可以使用较短的版本来切换div :) 

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

小提琴

解决方案7
 0  2014-10-03 19:29:06

尝试这个 

$(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/

看来您总是藏着同一个。

解决方案8
 0  2014-10-03 20:42:55

由于你是新的JavaScript和HTML（我假设你想学习）有像jQuery，许多伟大的图书馆UnderscoreJs和框架，如AngulerJS和骨干 ，可以使生活变得更容易。

但是更有趣的是使用纯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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery在两个类型之间选择第一个类型 jQuery在两个字符串标识符之间选择HTML Jquery选择两个特殊元素之间的元素 在两个元素之间选择某些元素[jQuery] jQuery的形式之间切换 Jquery 投稿二 forms 在两个选择框之间移动选项，PHP jQuery 单选电台有两种形式 传递两种形式之间的值 使用jquery单独验证两个表单
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM