Question

我正在尝试用分支问题创建一个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>

如果有人有关于解决这个问题的想法，或其他方式做分支表格的例子，我将非常感激！

谢谢，帕特里克

Answer 1

我在你的例子中玩了一下，删除了所有普通的JavaScript并添加了一些jQuery Mobile样式脚本，see working example here

   <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>

带有条件/分支问题的jQuery Mobile站点示例

1 个答案: