Question

我试图根据用户提供的选项更改一些定价表。

例如，如果他选择36个月和每月，它将显示div（显示：块;），而其他选项则显示6个。

我试图按照这个答案here但是它不起作用..有什么建议吗？我的目标是创建一个onChange / onClick的功能，只有在选择了2个选项后才能显示div。

<table width="100%">
<tbody>
    <tr>
        <td>Laufzeit:</td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" value="24-m" id="laufzeit_0" checked>
        24 Months</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" value="36-m" id="laufzeit_1">
        36 Months</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" value="48-m" id="laufzeit_2">
        48 Months</label>
        </td>
    </tr>
    <tr>
        <td>Abrechnung:</td>
        <td align="center"><label>
            <input type="radio" name="abrechnung" value="monthly" id="abrechnung_0" checked>
        Monthly</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="abrechnung" value="yearly" id="abrechnung_1">
        Yearly</label>
        </td>
      <td align="center"></td>
    </tr>
</tbody>

<div class="filter-24-m">24 m</div>
<div class="filter-24-y">24 y</div>
<div class="filter-36-m">36 m</div>
<div class="filter-36-y">36 y</div>
<div class="filter-48-m">48 m</div>
<div class="filter-48-y">48 y</div>

非常感谢你！

Answer 1

您也可以使用其他单选按钮的类似代码

$("#laufzeit_0").change(function(){
    if($(this).is(":checked")){
        if($("#abrechnung_0").is(":checked")){
            $("div.YOUR_DIV_CLASS").show();
        }
    }
});

Answer 2

您可以使用一个功能来完成。只有在选择了2个选项后才显示div。

尝试这样的事情：

$(document).ready(function() {
  
  $('input[name=abrechnung]').change(function() {
    var laufzeit = $('input[name=laufzeit]:checked').val();
    if(laufzeit.length > 0) {
      var abrechnung = $('input[name=abrechnung]:checked').val();
      $('.content').hide();
      $('.' + laufzeit + '-' + abrechnung).show();
    }
  });

  $('input[name=laufzeit]').change(function() {
    $('input[name=abrechnung]').prop('checked', false);
    $('.content').hide();
  });
  
});

.content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%">
<tbody>
    <tr>
        <td>Laufzeit:</td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" value="24-m" id="laufzeit_0" checked>
        24 Months</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" value="36-m" id="laufzeit_1">
        36 Months</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" value="48-m" id="laufzeit_2">
        48 Months</label>
        </td>
    </tr>
    <tr>
        <td>Abrechnung:</td>
        <td align="center"><label>
            <input type="radio" name="abrechnung" value="monthly" id="abrechnung_0" checked>
        Monthly</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="abrechnung" value="yearly" id="abrechnung_1">
        Yearly</label>
        </td>
      <td align="center"></td>
    </tr>
</tbody>
</table>
<div class="content 24-m-monthly" style="display:block">24-m monthly</div>
<div class="content 36-m-monthly">36-m monthly</div>
<div class="content 48-m-monthly">48-m monthly</div>
<div class="content 24-m-yearly">24-m yearly</div>
<div class="content 36-m-yearly">36-m yearly</div>
<div class="content 48-m-yearly">48-m yearly</div>

Answer 3

我通过提供电台的课程并检查课程中的任何变化是这样做的：

<input type="radio" name="laufzeit" class="laufzeit" value="24-m" id="laufzeit_0">
        24 Months</label>

然后您可以检查是否有任何更改以显示和隐藏相应的div。

 var laufzeit;
var abrechnung;
$(".laufzeit").change(function(){
    laufzeit = $(this).attr('value');
    if(abrechnung == ""){return}
    else{
       $('.show').hide();
       $('.'+abrechnung + '-' + laufzeit).show();
       $('.'+abrechnung + '-' + laufzeit).addClass('show');
    }

});
$(".abrechnung").change(function(){
    abrechnung = $(this).attr('value');
    if(laufzeit == ""){return}
    else{
       $('.show').hide();
       $('.'+abrechnung + '-' + laufzeit).show();
       $('.'+abrechnung + '-' + laufzeit).addClass('show');
    }

});

其余的看起来像这样：

    <table width="100%">
<tbody>
    <tr>
        <td>Laufzeit:</td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" class="laufzeit" value="24-m" id="laufzeit_0">
            24 Months</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" class="laufzeit" value="36-m" id="laufzeit_1">
        36 Months</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="laufzeit" class="laufzeit" value="48-m" id="laufzeit_2">
        48 Months</label>
        </td>
    </tr>
    <tr >
        <td>Abrechnung:</td>
        <td align="center"><label>
            <input type="radio" name="abrechnung" class="abrechnung" value="monthly" id="abrechnung_0">
        Monthly</label>
        </td>
        <td align="center"><label>
            <input type="radio" name="abrechnung" class="abrechnung" value="yearly" id="abrechnung_1">
        Yearly</label>
        </td>
      <td align="center"></td>
    </tr>
</tbody>

</table>
<div class="content 24-m-monthly show">24-m monthly</div>
<div class="content 36-m-monthly">36-m monthly</div>
<div class="content 48-m-monthly">48-m monthly</div>
<div class="content 24-m-yearly">24-m yearly</div>
<div class="content 36-m-yearly">36-m yearly</div>
<div class="content 48-m-yearly">48-m yearly</div>

Javascript根据单选按钮更改类

3 个答案: