Question

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

输入是：

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。

谢谢，
乍得。

Answer 1

你没有提到前三个按钮的父级。在不影响页面上的其他按钮的情况下绑定更改事件会更容易。你需要为前三个单选按钮编写更改事件。然后检查id。如果id匹配，相应的做。

$('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....
                      }
                    }
                );

Answer 2

<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');
    });
});

第二个输入基于第一个输入中选择的内容

2 个答案: