ソースコードにあるsample1とsample2のラジオボタンによる組み合わせで
それぞれ違った結果を表示させたいです。
一例をだすと
sample1の「1」とsample2の「ミカン」を選択したら
「文言2
光陰矢の如し」
と表示されるなど。
それぞれの希望する処理についてはif文の前にコメントアウトしました。
現状は、まったく違う結果が出てしまいます。
change()やcheckedで試しまたが、手詰まりになってしまい、
お手数ですが、解決策を教えていただけないでしょうか?
javascript
1$(function(){ 2 var wagahai = '<p>吾輩は猫である</p>' 3 var koin = '<p>光陰矢の如し</p>' 4 var pattern1 = '文言1'; 5 var pattern2 = '文言2'; 6 var pattern3 = '文言3'; 7 $resulta = $('.resulta'); 8 $resultb = $('.resultb'); 9 10 //1とりんごまたは、おかしを選択したら以下の処理 11 $("#q1-1,input[value='りんご'],input[value='おかし']").on('change', function(){ 12 if( $("#q1-1").is(':checked') && 13 $("input[value='りんご']").is(':checked') || 14 $("input[value='おかし']").is(':checked') ) { 15 $resulta.show().text(pattern1); 16 $resultb.show().html(koin); 17 } 18 }); 19 20 //1とみかんを選択したら以下の処理 21 $("#q1-1,input[value='みかん']").on('change', function(){ 22 if ( $("#q1-1").is(':checked') && 23 $("input[value='みかん']").is(':checked') ) { 24 $resulta.show().text(pattern2); 25 $resultb.show().html(koin); 26 } 27 }); 28 29 //2とみかんまたは、りんごまたは、おかしを選択したら以下の処理 30 $("#q1-2,input[value='みかん'],input[value='りんご'],input[value='おかし']").on('change', function(){ 31 if ( $("#q1-2").is(':checked') && 32 $("input[value='みかん']").is(':checked') || 33 $("input[value='りんご']").is(':checked') || 34 $("input[value='おかし']").is(':checked') ) { 35 $resulta.show().text(pattern3); 36 $resultb.show().html(wagahai); 37 } 38 }); 39 40 //3とみかんまたは、りんごまたは、おかしを選択したら以下の処理 41 $("#q1-3,input[value='みかん'],input[value='りんご'],input[value='おかし']").on('change', function(){ 42 if ( $("#q1-3").is(':checked') && 43 $("input[value='みかん']").is(':checked') || 44 $("input[value='りんご']").is(':checked') || 45 $("input[value='おかし']").is(':checked') ) { 46 $resulta.show().text(pattern3); 47 $resultb.show().html(wagahai); 48 } 49 }); 50});
html
1<h2>sample1</h2> 2<input type="radio" name="q1-1a" value="1" id="q1-1"> 3<label for="q1-1">1</label> 4<input type="radio" name="q1-1a" value="2" id="q1-2"> 5<label for="q1-2">2</label> 6<input type="radio" name="q1-1a" value="3" id="q1-3"> 7<label for="q1-3">3</label> 8 9<h2>sample2</h2> 10<input type="radio" name="q2-1a" value="りんご" id="q2-1"> 11<label for="q2-1">りんご</label> 12<input type="radio" name="q2-1a" value="みかん" id="q2-1"> 13<label for="q2-1">みかん</label> 14<input type="radio" name="q2-1a" value="おかし" id="q2-1"> 15<label for="q2-1">おかし</label> 16 17<div class="resulta"></div> 18<div class="resultb"></div>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/20 13:31