0

我有两个输入，它们在同一页和同一表格中相互对应。

输入是：

Select Event:
<input type="radio" name="type" value="Birthday" id="Birthday" CHECKED /> <label for="Birthday">Birthday</label><br />
<input type="radio" name="type" value="Anniversary" id="Anniversary" /> <label for="Anniversary">Anniversary</label><br />
<input type="radio" name="type" value="Holiday" id="Holiday" /> <label for="Holiday">Holiday</label><br />

现在我需要将上面选择的输入与下面输入的 VALUE 和 IMG SRC 相对应...


例如，假设如果选择了上面的生日收音机，那么下面的收音机是：

<input type="radio" name="design" value="Birthday_design_1" id="1" CHECKED /> <label for="1"><img src="images/Birthday_design_1.jpg" border="0" width="150" height="200" /></label>
<input type="radio" name="design" value="Birthday_design_2" id="2" /> <label for="1"><img src="images/Birthday_design_1.jpg" border="0" width="150" height="200" /></label>

或者，如果上面的周年纪念电台被填满，那么下面的电台将是：

<input type="radio" name="design" value="Anniversary_design_1" id="1" CHECKED /> <label for="1"><img src="images/Anniversary_design_1.jpg" border="0" width="150" height="200" /></label>
<input type="radio" name="design" value="Anniversary_design_2" id="2" /> <label for="1"><img src="images/Anniversary_design_1.jpg" border="0" width="150" height="200" /></label>

或者，如果上面填写了假日电台，那么下面的电台将是：

<input type="radio" name="design" value="Holiday_design_1" id="1" CHECKED /> <label for="1"><img src="images/Holiday_design_1.jpg" border="0" width="150" height="200" /></label>
<input type="radio" name="design" value="Holiday_design_2" id="2" /> <label for="1"><img src="images/Holiday_design_1.jpg" border="0" width="150" height="200" /></label>

正如您可能看到的那样，输入的 VALUE 也会发生变化，收音机的 IMG SRC 也会发生变化。

请帮忙，我相信这需要jQUERY。

谢谢，
乍得。

4

2 回答 2

1

您还没有提到前三个按钮的父级。这将更容易绑定更改事件而不会影响页面上的其他按钮。您需要为前三个单选按钮编写更改事件。然后检查 id.and 是否匹配，做相应的事情。

$('input:radio').change(
                     function(){
                     if($(this).attr("id")=="Birthday")
                     {
                      //show birthday category buttons
                     }
                     if($(this).attr("id")=="Anniversary")
                     {
                      //show Anniversary category buttons
                     }
                     if($(this).attr("id")=="Holiday")
                      {
                      //show Holiday category buttons
                     }
                     else{
                      //do nothing for other radio buttons....
                      }
                    }
                );
于 2013-02-17T06:56:34.260 回答
1 
<input group_class="group-1" class="event_radio" type="radio" name="type" value="Birthday" id="Birthday" CHECKED /> <label for="Birthday">Birthday</label><br />
<input group_class="group-2" class="event_radio" type="radio" name="type" value="Anniversary" id="Anniversary" /> <label for="Anniversary">Anniversary</label><br />
<input group_class="group-3" class="event_radio" type="radio" name="type" value="Holiday" id="Holiday" /> <label for="Holiday">Holiday</label><br />

<input class="group-1" type="radio" name="design" value="Birthday_design_1" id="1" CHECKED /> <label class="group-1" for="1"><img src="images/Birthday_design_1.jpg" border="0" width="150" height="200" /></label>
<input class="group-1" type="radio" name="design" value="Birthday_design_2" id="2" /> <label class="group-1" for="2"><img src="images/Birthday_design_1.jpg" border="0" width="150" height="200" /></label>

<input class="group-2" type="radio" name="design" value="Anniversary_design_1" id="3" CHECKED /> <label class="group-2" for="3"><img src="images/Anniversary_design_1.jpg" border="0" width="150" height="200" /></label>
<input class="group-2" type="radio" name="design" value="Anniversary_design_2" id="4" /> <label class="group-2" for="4"><img src="images/Anniversary_design_1.jpg" border="0" width="150" height="200" /></label>

<input class="group-3" type="radio" name="design" value="Holiday_design_1" id="5" CHECKED /> <label class="group-3" for="5"><img src="images/Holiday_design_1.jpg" border="0" width="150" height="200" /></label>
<input class="group-3" type="radio" name="design" value="Holiday_design_2" id="6" /> <label class="group-3" for="6"><img src="images/Holiday_design_1.jpg" border="0" width="150" height="200" /></label>

CSS：

.group-1, .group-2, .group-3 { display: none; }

和 javascript：

$(document).ready(function () {
    $('.event_radio').click(function () {
        $radio = $(this);

        $('.group-1, .group-2, .group3').fadeOut('fast');

        $('.'+$radio.attr('group_class')).fadeIn('fast');
    });
});
于 2013-02-17T07:05:15.643 回答