为每个选中的复选框显示相同的问题集。 （PHP和JS / Jquery）

Question

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

实施例

Checkbox1 Checkbox1 Checkbox1 Checkbox1

如果选中复选框1和3，则应显示

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

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

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

如果复选框3未选中，则应删除复选框3问题，并且只显示复选框1和4问题 复选框1：日期和日期以及开始时间和结束时间
复选框4：日期和日期以及开始时间和结束时间

Answer 1

你可以做这样的事情，它可以帮助你...

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("");
        });
 });

我在http://codebins.com/bin/4ldqpa8

上为上述问题做过bin

Answer 2

这是一种做法。为了将来参考，您可能应该自己尝试一些事情，然后询问为什么它可能无法正常工作。

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