为每个选中的复选框显示相同的问题集.(PHP和JS/Jquery） - display same set of questions for every checked checkboxes. (PHP and JS/Jquery)

display same set of questions for every checked checkboxes. (PHP and JS/Jquery)

我有一组复选框，当它们被选中时，我必须显示问题。这些问题永远都是一样的。这是在PHP 中完成的

示例

复选框1复选框1复选框1复选框1

如果复选框1和3被选中并且应该显示

复选框1：日期开始和日期结束以及开始时间和结束时间
复选框3：日期开始和日期结束以及开始时间和结束时间

如果复选框4被选中，则复选框4的另一个复选框应该显示相同的问题，并且应该显示

复选框1：日期开始和日期结束以及开始时间和结束时间
复选框3：日期开始和日期结束以及开始时间和结束时间
复选框4：日期开始和日期结束以及开始时间和结束时间

如果复选框3被取消选中，它应该去掉复选框3的问题，并且只显示复选框1和4的问题
复选框1：日期开始和日期结束以及开始时间和结束时间
复选框4：日期开始和日期结束以及开始时间和结束时间

你可以做这样的事情，它可能会帮助你。。。

HTML

<div id="panel">
  <input type="button" id="btnadd" name="btnadd" value="Add Question"/>
  <input type="button" id="btnreset" name="btnreset" value="Reset"/>
  <div id="quecheckbox">
  </div>
  <div id="quelist">
  </div>
</div>

jQuery:

function show_ques() {
        var i = $(this).attr('id').substr(-1);
        if ($(this).is(":checked")) {
            //get total count of question list 
            var nQue = $("#quelist").find("div[class^=que]").length;
            var isSet = false; //boolean to check if que is appended or not. 
            if (nQue > 0) {
                var nq = 0;
                $("#quelist").find("div[class^=que]:last").attr('class').substr(-1);
                $("#quelist").find("div[class^=que]").each(function() {
                    nq = $(this).attr('class').substr(-1);
                    if (nq > i && !isSet) {
                        $("#quelist .que" + nq).before("<div class='que" + i + "'>Question " + i + " is....?</div>");
                        isSet = true;
                    }
                });
            }
            if (!isSet) {
                $("#quelist").append("<div class='que" + i + "'>Question " + i + " is....?</div>");
            }
        } else {
            $("#quelist").find("div.que" + i).remove();
        }
 }
$(function() {
        $("#btnadd").click(function() {
            var i = $("#quecheckbox").find("input[type=checkbox]").length;
            if (i <= 0) i = 1;
            else i += 1;
            $("#quecheckbox").append("<div><input type='checkbox' id='que" + i + "' name='que" + i + "'/><label for='que" + i + "'>Question " + i + "</div>");
            $("#que" + i).bind('change', show_ques);
        });
        $("#btnreset").click(function() {
            $("#quecheckbox").html("");
            $("#quelist").html("");
        });
 });

我已经为上面的问题做了binhttp://codebins.com/bin/4ldqpa8

这是一种方法。为了将来的参考，你可能应该自己尝试一些东西，然后问为什么它可能不起作用。

http://jsfiddle.net/nickcaballero/U7JGW/