4

質問が分岐する JQM アンケートを作成しようとしています。つまり、質問 1 ～ 3 のアンケートで、質問 1 で特定の回答を選択すると、質問 1 と 2 の間に質問が動的に追加されます。

更新：ラジオボタンの値を非表示のdivの名前に一致させることで機能する試み（https://dl.dropbox.com/u/17841063/site2/index-c1.html#page2 ）を行いました--一致する場合は、div を再表示します。現在の問題は、回答を条件付き質問をトリガーしないオプションに戻すと、再度非表示にならないことです。たとえば、質問 A1 で [いいえ] または [不明] をクリックすると、質問 A2 が表示されますが、A1 で [はい] をクリックすると、A2 が残ります...

<script type="text/javascript">
// Place in this array the ID of the element you want to hide
var hide=['A2','A4'];
function setOpt()
{
resetOpt(); // Call the resetOpt function. Hide some elements in the "hide" array.
for(var i=0,sel=document.getElementsByTagName('input');i<sel.length;i++)
    {
    sel[i].onchange=function()
        {

        if(this.parentNode.tagName.toLowerCase()!='div')
            resetOpt(); // Hides the elements in "hide" array when the first select element is choosen
        try
            {
            document.getElementById(this.value).style.display='';
            }
        catch(e){} ; // When the value of the element is not an element ID
        }
    }
}

window.addEventListener?window.addEventListener('load',setOpt,false):
window.attachEvent('onload',setOpt);

function resetOpt()
{
for(var i=0;i<hide.length;i++) 
    document.getElementById(hide[i]).style.display='none'; // Hide the elements in "hide" array
}
</script>

上記のスクリプトを使用するラジオ ボタンは次のとおりです。

 <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
          <legend>(Question A1) A prominent accident smokes on top of the blessed reactionary?</legend>
          <input type="radio" name="aaa" id="aaa_0" value="notA2" />
          <label for="aaa_0">Yes</label>
          <input type="radio" name="aaa" id="aaa_1" value="A2" />
          <label for="aaa_1">No</label>
          <input type="radio" name="aaa" id="aaa_2" value="A2" />
          <label for="aaa_2">Unsure</label>
        </fieldset>
      </div>
     <div id="A2" data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
          <legend>(Question A2) Does a married composite remainder the shallow whistle??</legend>
          <input type="radio" name="bbb" id="bbb_0" value="" />
          <label for="bbb_0">Yes</label>
          <input type="radio" name="bbb" id="bbb_1" value="" />
          <label for="bbb_1">No</label>
          <input type="radio" name="bbb" id="bbb_2" value="" />
          <label for="bbb_2">Unsure</label>
       </fieldset>
      </div>

これを修正するアイデアや、フォームを分岐する他の方法の例を誰かが持っていれば、私はとても感謝しています!

ありがとう、パトリック

4

1 に答える 1

0

私はあなたの例を少し試してみました。プレーンなJavaScriptをすべて削除し、jQueryMobileスタイルのスクリプトを追加しました。ここで実際の例を参照してください。

   <script>
      $("input[type='radio']").bind( "change", function(event, ui) {
        var mySelection = $('input[name=aaa]:checked').val();
        //alert(mySelection);
        if (mySelection == "A2") {
          $('#A2').removeClass('ui-hidden-accessible');
        } else {
          $('#A2').addClass('ui-hidden-accessible');
        };
      });
    </script>
于 2012-11-08T19:55:19.833 に答える