我有两个输入,它们在相同的页面和相同的表格中相互对应。
输入是:
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。
谢谢,
乍得。
答案 0 :(得分: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....
}
}
);
答案 1 :(得分: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');
});
});