javascript - 将自定义 HTML 内容插入项目的复选框容器 'checked'

标签 javascript jquery checkbox

基本上；我想要实现的是“当且仅当”检查静态 HTML 表单中的元素；因此，如果选中复选框>，则用户点击“提交”按钮。未选中的项目或复选框会消失，我用下面的代码片段实现了这一点。

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

好的，所以那些没有被检查的隐藏也像他们应该的那样正确隐藏，完美!问题是:我需要在用户“选择/选中”然后点击提交按钮后，在下一页上用唯一的 HTML 填充复选框容器 div。现在在下一页；未选中的项目隐藏，表单元素隐藏，所以一切都很完美。因此，它只是选中的复选框/项目的黑色(当前为灰色背景)包装 div。但我只需要在每个中调用自定义 HTML。

再次；用户流程:静态主页 HTML 表单 > 用户选择复选框 > 点击提交 > 下一页所有未选中的项目隐藏，复选框本身全部隐藏，但它们各自的包装容器仍然保留 - 我只是希望自定义 HTML 此时出现在每个中。与空白相反因此，此时在每个 div 中插入自定义 HTML 是我的斗争

<小时/>

以下是完整页面代码:

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

最佳答案

希望有帮助。只需包含所有这些行:

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>

关于javascript - 将自定义 HTML 内容插入项目的复选框容器 'checked'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34138972/

上一篇：javascript - AngularJS 中的异步数据检索

下一篇：javascript - 找不到属性 "parsingMode"nodejs jsdom

相关文章：

php - 如何在php中包含js文件？

javascript - 我正在寻找一个支持视频文件中的多个音轨/流的 web/html5/javascript 视频播放器

javascript - jQuery UI 图像 slider

php - 我得到复选框值，但如果我不选择其中之一，它不会发送到数据库，尽管它保留记录，但不显示我应该做什么？

javascript - Ruby on Rails 和 Javascript - 指南帮助

javascript - 再次调用构造函数会抛出 Typerror : is not a constructor

jquery - 试图在水平菜单栏上移动

javascript - 如何在 jQuery Steps 插件中更改选项卡的宽度

如果数组 1 中的数据等于数组 2，PHP 设置要检查的复选框

asp.net - 如何更改 ASP.NET 中禁用复选框的标签颜色？

©2024 IT工具网  联系我们