Question

在我的注册表中，用户可以通过代码中给出的4种方式进行注册。但是，只有当用户选择折扣或分期付款方式时，我才知道如何显示和隐藏。此代码无效。

<head>
<script type="text/javascript">
$(document).ready(function() {
$('input[name=register]').click(function(){
        if(this.id=="discount")
        {
            $("#discount").show('slow');
        }
        else
        {
            $("#discount").hide('slow');
        }
        if(this.id=="installment")
        {
            $("#installment").show('slow');
        }
        else
        {
            $("#installment").hide('slow');
        }

});
});
</script>
</head>

<body>
<form id="reg" method="post" action="">
<table width="400" border="1">
  <tr><caption>Register</caption>
    <td>1.</td>
    <td><input type="radio" name="register" value="regpaid" />Paid
    <input type="radio" name="register" value="regfree" />Free
    <input type="radio" id="discount" name="register" value="chkdis" onclick="checkdiscount()" />Discount
    <input type="radio" id="installment" name="register" value="chkinst" onclick="checkinstallment()" />Installment
  <div id="discount" style="display:none">
  Paid <input name="paid" type="text" />
  Dsicount <input name="dis" type="text" /></div>
  <div id="installment" style="display:none">
  Paid <input name="amtpaid" type="text" />
  Due <input name="due" type="text" /></div>
</td>
  </tr>
</table>

</form>
</body>

需要帮助。提前谢谢。

Answer 1

您的div和单选按钮具有相同的ID。重命名div ID。

还包括JQuery并正确地重命名javascript中的ID

 $(document).ready(function() {
   $('input[name=register]').click(function() {
     if (this.id == "discount") {
       $("#discountDiv").show('slow');
     } else {
       $("#discountDiv").hide('slow');
     }
     if (this.id == "installment") {
       $("#installmentDiv").show('slow');
     } else {
       $("#installmentDiv").hide('slow');
     }

   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
</head>
<body>
  <form id="reg" method="post" action="">
    <table width="400" border="1">
      <tr>
        <caption>Register</caption>
        <td>1.</td>
        <td>
          <input type="radio" name="register" value="regpaid" />Paid
          <input type="radio" name="register" value="regfree" />Free
          <input type="radio" id="discount" name="register" value="chkdis" />Discount
          <input type="radio" id="installment" name="register" value="chkinst" />Installment
          <div id="discountDiv" style="display:none">
            Paid
            <input name="paid" type="text" />Dsicount
            <input name="dis" type="text" />
          </div>
          <div id="installmentDiv" style="display:none">
            Paid
            <input name="amtpaid" type="text" />Due
            <input name="due" type="text" />
          </div>
        </td>
      </tr>
    </table>

  </form>
</body>

Answer 2

一种解决方案是让您的所有ID都是唯一的，然后将'-div'附加到可隐藏的元素上，以便我们可以说＆＃34; 如果我选择#kittens然后显示#kittens-格＆＃34 ;. E.G：

＆＃13;

$(document).ready(function() {
    $('input[name=register]').click(function(){
        
        //use an attribute selector (http://api.jquery.com/attribute-ends-with-selector/) and hide the two divs
        $("[id$='-div']").hide("slow"); //hide all divs whos id ends in'-div'
        
        //get the id of the clicked element
        var id = $(this).attr("id"); //eg 'discount'
        
        //and show any matched element
        $("#"+id+"-div").show('slow'); //eg '#discount-div'
    
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="reg" method="post" action="">
<table width="400" border="1">
  <tr><caption>Register</caption>
    <td>1.</td>
    <td><input type="radio" name="register" value="regpaid" />Paid
    <input type="radio" name="register" value="regfree" />Free
    <input type="radio" id="discount" name="register" value="chkdis" onclick="checkdiscount()" />Discount
    <input type="radio" id="installment" name="register" value="chkinst" onclick="checkinstallment()" />Installment
  <div id="discount-div" style="display:none">
  Paid <input name="paid" type="text" />
  Dsicount <input name="dis" type="text" /></div>
  <div id="installment-div" style="display:none">
  Paid <input name="amtpaid" type="text" />
  Due <input name="due" type="text" /></div>
</td>
  </tr>
</table>

</form>

＆＃13;

这只是几种可能的解决方案之一。您可以轻松地使用一个功能来显示一个元素，该ID与所选单选按钮的值相匹配：

$(document).ready(function() {
    $('input[name=register]').click(function(){
        $("#chkdis, #chkinst").hide('slow')
        $("#"+$(this).val()).show('slow');    
    });
});

＆＃13;

$(document).ready(function() {
    $('input[name=register]').click(function(){
        $("#chkdis, #chkinst").hide('slow')
        $("#"+$(this).val()).show('slow');    
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="reg" method="post" action="">
<table width="400" border="1">
  <tr><caption>Register</caption>
    <td>1.</td>
    <td><input type="radio" name="register" value="regpaid" />Paid
    <input type="radio" name="register" value="regfree" />Free
    <input type="radio" id="discount" name="register" value="chkdis" onclick="checkdiscount()" />Discount
    <input type="radio" id="installment" name="register" value="chkinst" onclick="checkinstallment()" />Installment
  <div id="chkdis" style="display:none">
  Paid <input name="paid" type="text" />
  Dsicount <input name="dis" type="text" /></div>
  <div id="chkinst" style="display:none">
  Paid <input name="amtpaid" type="text" />
  Due <input name="due" type="text" /></div>
</td>
  </tr>
</table>

</form>

＆＃13;

Answer 3

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
        $('input[type="radio"]').click(function() {
           if($(this).attr('id') == 'discount') {
                $('#discount1').show('slow');  
               $('#installment1').hide('slow'); 
           }
           if($(this).attr('id') == 'installment') {
                $('#installment1').show('slow');  
               $('#discount1').hide('slow'); 
           }
       });

http://jsfiddle.net/7bzrez49/

你走了！

无法通过选定的单选按钮显示/隐藏div

3 个答案: