0

同じページと同じフォームで互いに対応する2つの入力があります。

入力は次のとおりです。

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もラジオのIMGSRCと同じように変化します。

助けてください、これにはjQUERYが必要になると思います。

ありがとう、
チャド。

4

2 に答える 2

1

最初の3つのボタンの親については言及していません。これにより、ページ上の他のボタンに影響を与えることなく変更イベントをバインドするのが簡単になります。最初の3つのラジオボタンの変更イベントを作成する必要があります。次に、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....
                      }
                    }
                );
于 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 に答える