将自定义HTML内容插入到项目的复选框容器中并选中＆＃39;

时间：2015-12-07 16:55:10

标签： javascript jquery checkbox

基本上;我想要实现的目标是＆＃39; 当且仅当＆＃39;检查我的静态HTML表单中的元素;因此，如果选中复选框＆gt;然后用户点击＆＃39; 提交 ＆＃39;按钮。未经检查的项目或复选框只是消失了，我将其与下面的代码片段进行比较。

    $("input[type=checkbox]:not(:checked)").parent().hide();

好的，所以没有检查的那些隐藏得正确，因为它们也是如此，完美！问题是：在用户选择/选中＆＃39;之后，我需要在下一页上填充唯一HTML的复选框容器div。然后点击提交按钮。所以目前在下一页;未检查的项目隐藏，表单元素隐藏，所以这一切都是完美的。所以它只是被检查的复选框/项目的黑色（当前是灰色背景）包装div。但我只需要在每个中调用自定义HTML。

再次;用户流程：静态主页HTML表单＆gt;用户选择复选框＆gt;点击提交＆gt;下一页所有未检查的项目都隐藏，复选框自己全部隐藏，但它们各自的包装容器仍然存在 - 我只想在此时出现自定义HTML。而不是空白 所以，此时在每个div中插入自定义HTML是我的奋斗

以下是整页代码：

＆＃13;
＆＃13; 
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script src="js/bootstrap.js" type="text/javascript"></script>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>

<style>
  #item1 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item2 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item3 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item4 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  .space {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px 4px 4px 4px;
  }
</style>

<body>
  <div class="container" id="records" style="background-color:#fff; width: 400px; margin: 0 auto;">
    <br/>

    <div class="row" id="item1" class="box">
      Item 1 Details for the PDF test.
      <br>

      <input type="checkbox" id="check1" name="sample[]" value="red" /> <em>This</em> is a checkbox1
      <br />

    </div>

    <div class="space"></div>

    <div class="row" id="item2" class="box">
      Item 2 Details for the PDF test.
      <br>

      <input type="checkbox" id="check2" name="sample[]" value="red" /> <em>This</em> is a checkbox2
      <br />

    </div>

    <div class="space"></div>

    <div class="row" id="item3" class="box">
      Item 3 Details for the PDF test.
      <br>

      <input type="checkbox" id="check3" name="sample[]" value="red" /> <em>This</em> is a checkbox3
      <br />

    </div>

    <div class="space"></div>

    <div class="row" id="item4" class="box">
      Item 4 Details for the PDF test.
      <br>

      <input type="checkbox" id="check4" name="sample[]" value="red" /> <em>This</em> is a checkbox4
      <br />
    </div>

    <div class="space"></div>

    <center>
      <div class="container1">
        <div class="row">
          <div class="col-md-8">
            <p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a>
            </p>
          </div>
        </div>
      </div>
    </center>

    <div id="print" style="background-color:#fff"></div>
    <script type="text/javascript">
      $("#container").css('background', '#fff')

       $('.download-pdf').click(function() {

        $("input[type=checkbox]:not(:checked)").parent().hide();

        var pdf = new jsPDF('p', 'pt', 'a4');

        pdf.addHTML(document.getElementById('records'), function() {});
        var file = 'test';
        if (typeof doc !== 'undefined') {
          doc.save(file + '.pdf');
        } else if (typeof pdf !== 'undefined') {
          (function() {
            pdf.save(file + '.pdf');
            // $("#item4").hide();

          }, 2000);
        } else {
          alert('Error 0xE001BADF');
        }

      });
    </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

希望它有所帮助。只包括所有这些行：

texts = {
  item1: 'Some <strong>html</strong> gfor item1',
  item2: 'Some <strong>html</strong> gfor item2',
  item3: 'Some <strong>html</strong> gfor item3',
  item4: 'Some <strong>html</strong> gfor item4',
}

notChecked = $("input[type=checkbox]:not(:checked)").parent();
notChecked.hide();
yesChecked = $("input[type=checkbox]:checked").parent();

$.each(yesChecked, function( index, el ) {
  $(el).show().html(texts[$(el).attr('id')]);
});

因此，创建一个哈希文本，其中包含每个容器ID的副本，如图所示。 不是有史以来最美丽的版本，而是快速响应

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script src="js/bootstrap.js" type="text/javascript"></script>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>

<style>
  #item1 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item2 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item3 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item4 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  .space {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px 4px 4px 4px;
  }
</style>

<body>
  <div class="container" id="records" style="background-color:#fff; width: 400px; margin: 0 auto;">
    <br/>

    <div class="row" id="item1" class="box">
      Item 1 Details for the PDF test.
      <br>

      <input type="checkbox" id="check1" name="sample[]" value="red" /> <em>This</em> is a checkbox1
      <br />

    </div>

    <div class="space"></div>

    <div class="row" id="item2" class="box">
      Item 2 Details for the PDF test.
      <br>

      <input type="checkbox" id="check2" name="sample[]" value="red" /> <em>This</em> is a checkbox2
      <br />

    </div>

    <div class="space"></div>

    <div class="row" id="item3" class="box">
      Item 3 Details for the PDF test.
      <br>

      <input type="checkbox" id="check3" name="sample[]" value="red" /> <em>This</em> is a checkbox3
      <br />

    </div>

    <div class="space"></div>

    <div class="row" id="item4" class="box">
      Item 4 Details for the PDF test.
      <br>

      <input type="checkbox" id="check4" name="sample[]" value="red" /> <em>This</em> is a checkbox4
      <br />
    </div>

    <div class="space"></div>

    <center>
      <div class="container1">
        <div class="row">
          <div class="col-md-8">
            <p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a>
            </p>
          </div>
        </div>
      </div>
    </center>

    <div id="print" style="background-color:#fff"></div>
    <script type="text/javascript">
      texts = {
        item1: 'Some <strong>html</strong> gfor item1',
        item2: 'Some <strong>html</strong> gfor item2',
        item3: 'Some <strong>html</strong> gfor item3',
        item4: 'Some <strong>html</strong> gfor item4',
      }
      $("#container").css('background', '#fff')

       $('.download-pdf').click(function() {

        notChecked = $("input[type=checkbox]:not(:checked)").parent();
        notChecked.hide();
        yesChecked = $("input[type=checkbox]:checked").parent();

        $.each(yesChecked, function( index, el ) {
          $(el).show().html(texts[$(el).attr('id')]);
        });

        var pdf = new jsPDF('p', 'pt', 'a4');

        pdf.addHTML(document.getElementById('records'), function() {});
        var file = 'test';
        if (typeof doc !== 'undefined') {
          doc.save(file + '.pdf');
        } else if (typeof pdf !== 'undefined') {
          (function() {
            pdf.save(file + '.pdf');
            // $("#item4").hide();

          }, 2000);
        } else {
          alert('Error 0xE001BADF');
        }

      });
    </script>
</body>

</html>

答案 1 :(得分：1)

这是另一个版本，您只需在提交后的类中指定div内的HTML：

＆＃13;
＆＃13; 
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script src="js/bootstrap.js" type="text/javascript"></script>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>

<style>
  #item1 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item2 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item3 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  #item4 {
    padding: 20px;
    width: 300px;
    height: 100px;
    text-align: center;
    background: #ddd;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 3px 3px 3px #333;
  }
  .space {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px 4px 4px 4px;
  }
  .box .after-submit {
    display: none;
  }
</style>

<body>
  <div class="container" id="records" style="background-color:#fff; width: 400px; margin: 0 auto;">
    <br/>

    <div class="row" id="item1" class="box">
      <div class="after-submit">
        Some <strong>HTML</strong> here 1
      </div>
      <div class="before-submit">
        Item 1 Details for the PDF test.
        <br>

        <input type="checkbox" id="check1" name="sample[]" value="red" /> <em>This</em> is a checkbox1
        <br />
      </div>
    </div>

    <div class="space"></div>

    <div class="row" id="item2" class="box">
      <div class="after-submit">
        Some <strong>HTML</strong> here 2
      </div>
      <div class="before-submit">

        Item 2 Details for the PDF test.
        <br>

        <input type="checkbox" id="check2" name="sample[]" value="red" /> <em>This</em> is a checkbox2
        <br />
      </div>
    </div>

    <div class="space"></div>

    <div class="row" id="item3" class="box">
      <div class="after-submit">
        Some <strong>HTML</strong> here 3
      </div>
      <div class="before-submit">
        Item 3 Details for the PDF test.
        <br>

        <input type="checkbox" id="check3" name="sample[]" value="red" /> <em>This</em> is a checkbox3
        <br />
      </div>
    </div>

    <div class="space"></div>

    <div class="row" id="item4" class="box">
      <div class="after-submit">
        Some <strong>HTML</strong> here 4
      </div>
      <div class="before-submit">
        Item 4 Details for the PDF test.
        <br>

        <input type="checkbox" id="check4" name="sample[]" value="red" /> <em>This</em> is a checkbox4
        <br />
      </div>
    </div>

    <div class="space"></div>

    <center>
      <div class="container1">
        <div class="row">
          <div class="col-md-8">
            <p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a>
            </p>
          </div>
        </div>
      </div>
    </center>

    <div id="print" style="background-color:#fff"></div>
    <script type="text/javascript">
      $("#container").css('background', '#fff')

       $('.download-pdf').click(function() {

        yesChecked = $("input[type=checkbox]:checked").closest(".before-submit").hide();
        yesChecked = $("input[type=checkbox]:checked").closest(".after-submit").show();
        notChecked = $("input[type=checkbox]:not(:checked)").parent().parent();
        notChecked.hide();


        var pdf = new jsPDF('p', 'pt', 'a4');

        pdf.addHTML(document.getElementById('records'), function() {});
        var file = 'test';
        if (typeof doc !== 'undefined') {
          doc.save(file + '.pdf');
        } else if (typeof pdf !== 'undefined') {
          (function() {
            pdf.save(file + '.pdf');
            // $("#item4").hide();

          }, 2000);
        } else {
          alert('Error 0xE001BADF');
        }

      });
    </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题