Question

我正在尝试根据单选按钮选择显示不同的表ID。我已经开始了，但实际上看不出我对IF STATEMENT的错误。

表格应根据单选按钮选择进行更改。任何帮助将非常感激。感谢

<tr>
    <td>Select An Option:</td>
    <td>
        <div>
            <input id="selection1" type="radio" name="group1" value="charge" checked="checked">
            Charge me
            </option></br>

            <input id="selection2" type="radio" name="group1" value="charge1">
            another option, no display
            </option><br/>    

            <input id="selection3" type="radio" name="group1" value="charge2" >    
            another option, no display 
            </option><br/>   
        </div>
    </td>
</tr>

<script>
    $(document).ready(function() {
        $('input[name="group1"]').change(function(){
            if ($(this).val() == "charge") {
                $('#charge').css('display', 'inline');
            }
            else if ($(this).val() == "charge1") {
                $('#charge1').css('display', 'inline');
            }
            else if ($(this).val() == "charge2")
            {
                $('#charge2').css('display', 'inline');
            }
        });
    });
</script>

<table id="charge"></table>
<table id="charge1"></table>
<table id="charge2"></table>

Answer 1

首先，我会针对输入修复您的html - 您有关闭option个标签和一个反斜杠位于错误位置的br。

接下来，我会给你所有的收费表一个班级，然后你可以使用收音机的价值来显示你想要的表格。

var tables = $('.charge-table');
$('input[name="group1"]').on('change', function() {
  tables.hide();
  $('#' + $(this).val()).show();
});

.charge-table {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="selection1" type="radio" name="group1" value="charge">Charge me
  <br/>
  <input id="selection2" type="radio" name="group1" value="charge1">another option, no display
  <br/>
  <input id="selection3" type="radio" name="group1" value="charge2">another option, no display
  <br/>
</div>


<table id="charge" class="charge-table">
  <tr>
    <td>charge</td>
  </tr>
</table>
<table id="charge1" class="charge-table">
  <tr>
    <td>charge 1</td>
  </tr>
</table>
<table id="charge2" class="charge-table">
  <tr>
    <td>charge 2</td>
  </tr>
</table>

Answer 2

请尝试以下解决方案：

$(document).ready(function() {
        $('input[name="group1"]').change(function(){
            if ($("input[name='group1']:checked").val() == "charge")
          {
            $('#selection1').css('display', 'inline');
           }

            else if ($("input[name='group1']:checked").val() == "charge1")
           {
            $('#selection2').css('display', 'inline');
          }

            else if ($("input[name='group1']:checked").val() == "charge2")
          {
            $('#selection3').css('display', 'inline');
          }

        });
     });

Answer 3

进一步向Petes回答，这就是我实现它的方式

$("input[type=radio]").change(function(){
   var tableId  = $("input[type=radio][id="+ this.id + "]").val();
    
     $("#charge1").css('display', 'none');
     $("#charge").css('display', 'none');
     $("#charge2").css('display', 'none');
    
    $("#" + tableId).css('display', 'inline');
    
});

<div>
  <input id="selection1" type="radio" name="group1" value="charge">Charge me
  <br/>
  <input id="selection2" type="radio" name="group1" value="charge1">another option, no display
  <br/>
  <input id="selection3" type="radio" name="group1" value="charge2">another option, no display
  <br/>
</div>


<table id="charge" class="charge-table">
  <tr>
    <td>charge</td>
  </tr>
</table>
<table id="charge1" class="charge-table">
  <tr>
    <td>charge 1</td>
  </tr>
</table>
<table id="charge2" class="charge-table">
  <tr>
    <td>charge 2</td>
  </tr>
</table

见JsFiddle：https://jsfiddle.net/wfpfg2gu/1/

根据单选按钮选择JS显示不同的表ID

3 个答案: