4

我正在尝试创建一个带有分支问题的 JQM 调查——即在带有问题 1-3 的调查中，如果您在问题 1 上选择特定答案，则会在问题 1 和问题 2 之间动态添加一个问题。

更新：我做了一个尝试（https://dl.dropbox.com/u/17841063/site2/index-c1.html#page2），通过将单选按钮的值与隐藏的 div 的名称相匹配来工作——如果有匹配，它会取消隐藏 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

I played around a little bit with your example, removed all your plain JavaScript and added some jQuery Mobile style script, 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>
于 2012-11-08T19:55:19.833 回答