将自定义HTML内容插入到“checked”项目的checkbox容器中。 [英] insert custom HTML content to checkbox containers of items 'checked'

查看：158
本文介绍了将自定义HTML内容插入到“checked”项目的checkbox容器中。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

基本上;我想要实现的是当且仅当时，静态HTML表单中的元素被选中;因此如果选中复选框，那么用户会点击提交 按钮。

Basically; what I am trying to achieve is 'if and only if' an element in my static HTML form is checked; so if a checkbox is checked > then the user hits the 'submit' button. The items or checkboxes that are not checked, simply disappear, I have this with the below snippet of code.

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

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

OK, so the ones that are not checked hide correctly as they are supposed too, perfect! The problem is: I need the checkbox container div(s) to populate with unique HTML on the next page after the user has 'selected / checked' and then hit submit button. So currently on the next page; the non-checked items hide, and the form elements hide, so all that is perfect. So it's just the black (currently grey background) wrapper divs of the check boxes / items that are checked. But I just need to invoke custom HTML in each one.

再次;用户流程：静态首页HTML表单>用户选择复选框>命中的提交>下一页所有未选中的项目隐藏，复选框自己全部隐藏，但它们各自的包装器容器保持 - 我只想在这里出现自定义HTML 。

Again; user flow: Static Homepage HTML form > user selects checkboxes > hit's submit > next page all non-checked items hide, check boxes themself all hide, but their respective wrapper containers remain - and I simply want custom HTML to appear in each at this point. As opposed to being blank So, the insertion of custom HTML in each of these divs at this point is my struggle

下面是完整页代码： 

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

推荐答案

希望它有帮助。只包含以下所有行：

Hope it helps. Just included all these lines:

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的副本，如图所示。
不是最美丽的版本，但响应速度很快

So create a hash texts that will include copy per each container ID, as shown. Not the most beautiful version ever, but a fast response

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

这篇关于将自定义HTML内容插入到“checked”项目的checkbox容器中。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆