Question

我正在调用功能onclick单选按钮，但它只能处理一个单选按钮，而不是其他单选按钮。如何在两个单选按钮上调用相同的功能？

$("#trip_type_filter").change(function(){           
if($(this).val()=="yes")
  {
    $('[class="single_trip"]').show();
    $('[class="multi_trip"]').show();
    $('[class="all_inclusive_single"]').show();
    $('[class="all_inclusive_multi"]').show();
    $('[class="trip_cancellation"]').show();
  } 
else if($(this).val()=="no")
  {
    $('[class="single_trip"]').show();
    $('[class="multi_trip"]').hide();
    $('[class="all_inclusive_single"]').hide();
    $('[class="all_inclusive_multi"]').hide();
    $('[class="trip_cancellation"]').hide();
  }
});

这是html：

<input type="radio" id="trip_type_filter" name="trip_type_filter" value="yes" /> Yes
<input type="radio" id="trip_type_filter" name="trip_type_filter" value="no" /> No

和

<div class="single_trip">single_trip</div>
<div class="multi_trip">multi_trip</div>
<div class="all_inclusive_single">all_inclusive_single</div>
<div class="all_inclusive_multi">all_inclusive_multi</div>
<div class="trip_cancellation">trip_cancellation</div>

Answer 1

两个ID都是一样的。使用不同的ID。还要在复选框中添加一个类，并将该事件添加到类中：

HTML 的

<input type="radio" id="trip_type_filter" class="checkChange" name="trip_type_filter" value="yes" /> Yes
<input type="radio" id="trip_type_filter2" class="checkChange" name="trip_type_filter" value="no" /> No

的Javascript

$(".checkChange").change(function(){           
if($(this).val()=="yes")
  {
    $('[class="single_trip"]').show();
    $('[class="multi_trip"]').show();
    $('[class="all_inclusive_single"]').show();
    $('[class="all_inclusive_multi"]').show();
    $('[class="trip_cancellation"]').show();
  } 
else if($(this).val()=="no")
  {
    $('[class="single_trip"]').show();
    $('[class="multi_trip"]').hide();
    $('[class="all_inclusive_single"]').hide();
    $('[class="all_inclusive_multi"]').hide();
    $('[class="trip_cancellation"]').hide();
  }
});

Answer 2

更改此

$("#trip_type_filter").change(function(){

要

$("input[type=radio][name=trip_type_filter]").change(function(){

Answer 3

更改您的输入ID。并与班级核对。

<input type="radio" id="trip_type_filter_yes" class="classToCheck" name="trip_type_filter" value="yes" /> Yes
<input type="radio" id="trip_type_filter_no" class="classToCheck" name="trip_type_filter" value="no" /> No

并使用class chere

$(".classToCheck").change

Answer 4

你几乎把它纠正了。我刚刚将您的复选框ID更改为类，并将change事件更改为响应该类中的更改：

<input type="radio" class="trip_type_filter" name="trip_type_filter" value="yes" />Yes
<input type="radio" class="trip_type_filter" name="trip_type_filter" value="no" />No

＆＃13;

$(".trip_type_filter").change(function () {
    if ($(this).val() == "yes") {
        $('[class="single_trip"]').show();
        $('[class="multi_trip"]').show();
        $('[class="all_inclusive_single"]').show();
        $('[class="all_inclusive_multi"]').show();
        $('[class="trip_cancellation"]').show();
    } else if ($(this).val() == "no") {
        $('[class="single_trip"]').show();
        $('[class="multi_trip"]').hide();
        $('[class="all_inclusive_single"]').hide();
        $('[class="all_inclusive_multi"]').hide();
        $('[class="trip_cancellation"]').hide();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" class="trip_type_filter" name="trip_type_filter" value="yes" />Yes
<input type="radio" class="trip_type_filter" name="trip_type_filter" value="no" />No
<div class="single_trip">single_trip</div>
<div class="multi_trip">multi_trip</div>
<div class="all_inclusive_single">all_inclusive_single</div>
<div class="all_inclusive_multi">all_inclusive_multi</div>
<div class="trip_cancellation">trip_cancellation</div>

＆＃13;

OnClick功能无线电不工作

4 个答案: