Question

<form action ="one.php" method="post">
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db">
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">

<div id="a">Hi</div>

<div id="b">Hellow</div>

</form>

我有一个表单，其中有两个单选按钮和两个div。如果我选择id为1的单选按钮，则显示id =“a”的div，并显示其他div，其他div将被隐藏，表单操作将为1 .PHP。如果我选择id =“two”的单选按钮，将显示id =“b”的div，并将表单操作更改为“two.php”..如何使用jquery或javascript.Any帮助完成此操作。

Answer 1

<form id="myForm" action ="one.php" method="post">
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">

<div id="a">Hi</div>

<div id="b">Hellow</div>

</form>

css:
  #b{
     display:none;  
  }  


Script

    $(document).ready(function () {
        $(".css-checkbox").click(function () {
            if ($(this).attr('id') == "one") {
                $('#a').show();
                $('#b').hide();
                $("#myForm").attr('action','one.php');
            } else {
                $('#a').hide();
                $('#b').show();
                $("#myForm").attr('action','two.php');
            }
        });

    });

FIDDLE

Answer 2

试试这个

    $(document).ready(function () {
    $('div').hide()
    $(".css-checkbox").click(function () {
        if ($(this).attr('id') == "one") {
            $('#a').fadeIn().siblings('div').fadeOut()
            $("form").attr('action','one.php');
        } else {
            $('#b').fadeIn().siblings('div').fadeOut()
            $("form").attr('action','two.php');
        }
    });

 });

DEMO

Answer 3

试试这个

$('input[type=radio].css-checkbox').click(function(){
    if (this.id=="one"){
        $('div#a').show();
        $('div#b').hide();
        $('form').attr('action','one.php');
    }
    else {
         $('div#a').hide();
        $('div#b').show();
        $('form').attr('action','two.php');
    }
});

<强> DEMO HERE

Answer 4

试试这个：jsfiddle

jQuery("[name='cardType']").click(function(){
   var divs = $(this).parent().find(">div");
    divs.hide();
    if(this.id === 'one'){
        $("#a").show();
    }else{
        $("#b").show();
    }
});

Answer 5

    $(function () {

        $('input[name=cardType]').click(function () {
            var id_checked = $('input[name=cardType]:radio:checked').attr('id');
            if (id_checked == 'one') {
                $('#a').show();
                $('#b').hide();
            } else if (id_checked == 'two') {
                $('#a').hide();
                $('#b').show();
            }
            $('form').attr('action', id_checked + '.php');
        });     

    });

在单选按钮上显示/隐藏div并更改表单操作

5 个答案: