JSP 的值未达到 javascript

Question

我有一个非常奇怪的问题。

我有一个 jsp，我在其中通过 jstl 标签填充了数据库中的值。 我想将检查的行读入 Javascript，但我无法将这些值放入我的 js 文件中。

我使用 jQuery、dojo 和普通 JavaScript 读取这些值并显示在 Z2567A5EC9705EB67AC2C98403 控制台中。

有人可以查看并告诉我为什么无法在 javascript 中读取这些值吗？ 下面是我的 jsp 的代码片段。

<div class="table-responsive">
  <table class="table">
    <thead></thead>
    <tbody>
    <c:forEach var="emailItemType"
               items="${emailFormModel.getEMailFormDisplayData().getEMailItemTypes()}">
      <tr class="accordion-toggle collapsed" id="accordion1"
          data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
        <th class="expand-button"></th>
        <th>
          <c:out value="${emailItemType.key}"/>
        </th>
        <th><input type="checkbox" class="dijit.form.CheckBox" id="select_all">
        </th>

      </tr>
      <tr class="hide-table-padding">
        <td></td>
        <td colspan="3">
          <div id="collapseOne" class="collapse">
            <c:forEach var="emailItemTypeAttr" items="${emailItemType.value}"
                       varStatus="idx">
              <div class="row">
                <div class="col-sm-1">
                  <input type="checkbox" data-dojo-attach-point="checkBox"
                         name="checkBox" id="checkbox"
                         data-dojo-type="dijit.form.CheckBox"
                         class="dijitCheckBox" value="check1">
                </div>
                <div class="col-sm-2 text-nowrap" id="sourceValue"
                     name="sourceValue" data-dojo-attach-point="sourceValue"
                     value="${emailItemTypeAttr.getSourceValue()}">
                  <c:out value="${emailItemTypeAttr.getSourceValue()}"/>

                </div>
                <div class="col-sm-2 text-nowrap"
                     data-dojo-attach-point="userIdValue" name="userIdValue">
                  <c:out value="${emailItemTypeAttr.getUserIdValue()}"/>
                </div>
                <div class="col-sm-2 text-nowrap"
                     data-dojo-attach-point="objectId" name="objectId">
                  <c:out value="${emailItemTypeAttr.getObjectId()}"/>
                </div>
              </div>
            </c:forEach>
        </td>
      </tr>
    </c:forEach>
    </tbody>
  </table>
</div>

下面是我的JS代码：

dojo code :
    require([
        "dojo/request",   
        "dojo/dom",
        "dojo/dom-attr",
        "dijit/registry",
         "dojo/text!./templates/email.jsp"
    ], function (request,dom,domattr,registry,template) {
        var source = thisForm.sourceValue.get('value');
        console.log("var is :" + source);       

        var checkboxes = registry.findWidgets(dom.byId('checkbox'));
        console.log(checkboxes);    

       var SourceValue = registry.byId("sourceValue").get('value');
        console.log("sourceValue from regitry id:"+ SourceValue);
         var sourceValue = dojo.byId("sourceValue").value;
         console.log("sourceValue from dojobyid:"+ sourceValue);

       });

JavaScript 代码抛出错误说它是未定义的：

var sourceValue = document.getElementById("sourceValue").textContent;;
console.log("sourceValue:"+sourceValue);

下面的代码在 jquery 中，用于在选中上述复选框时选择所有复选框。 这有效，但仍不显示源值。

$(document).ready(function () {
  var sourceValue = $('#sourceValue').val();
  console.log('sourceValue:' + sourceValue);
  $('#select_all').on('click', function () {
    if (this.checked) {
      $('.dijitCheckBox').each(function () {
        this.checked = true;
      });
    } else {
      $('.dijitCheckBox').each(function () {
        this.checked = false;
      });
    }
  });

  $('.dijitCheckBox').on('click', function () {
    if ($('.dijitCheckBox:checked').length == $('.dijitCheckBox').length) {
      $('#select_all').prop('checked', true);
    } else {
      $('#select_all').prop('checked', false);
    }
  });
});

没有什么是有效的，请帮忙，因为我正在为此工作很长时间。

Answer 1

单击复选框dijitCheckBox时，您可以使用 jquery 的find()和closest()的方法来获取您需要使用classname的值。

演示代码：

 $(document).ready(function() { $('#select_all').on('click', function() { if (this.checked) { $('.dijitCheckBox').each(function() { this.checked = true; //checkbox->closest <tr>--> find class with name sourceValue console.log($(this).closest('tr').find('.sourceValue').text() + " | "); }); //same do with other div just change classs name } else { $('.dijitCheckBox').each(function() { this.checked = false; }); } }); $('.dijitCheckBox').on('click', function() { //when checkbox is clicked find closest tr with class sourceValue var source_value = $(this).closest('tr').find('.sourceValue').text(); console.log("sourceValue:"+source_value); if ($('.dijitCheckBox:checked').length == $('.dijitCheckBox').length) { $('#select_all').prop('checked', true); } else { $('#select_all').prop('checked', false); } }); });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="table-responsive"> <table class="table"> <thead></thead> <tbody> <tr class="accordion-toggle collapsed" id="accordion1" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne"> <th class="expand-button"></th> <th> <:--<c.out value="${emailItemType.key}" />-->123 </th> <th><input type="checkbox" class="dijit.form:CheckBox" id="select_all"> </th> </tr> <tr class="accordion-toggle collapsed" id="accordion1" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo"> <th class="expand-button"></th> <th> <.--<c.out value="${emailItemType.key}" />-->345 </th> <th><input type="checkbox" class="dijit.form.CheckBox" id="select_all"> </th> </tr> <tr class="hide-table-padding"> <td></td> <td colspan="3"> <div id="collapseOne" class="collapse"> <div class="row"> <div class="col-sm-1"> <input type="checkbox" data-dojo-attach-point="checkBox" name="checkBox" id="checkbox" data-dojo-type="dijit.form.CheckBox" class="dijitCheckBox" value="check1"> </div> <div class="col-sm-2 text-nowrap sourceValue" id="sourceValue" name="sourceValue" data-dojo-attach-point="sourceValue" value="${emailItemTypeAttr.getSourceValue()}">Abc </div> <div class="col-sm-2 text-nowrap" data-dojo-attach-point="userIdValue" name="userIdValue"> 1</div> <div class="col-sm-2 text-nowrap" data-dojo-attach-point="objectId" name="objectId"> 2 </div> </div> </td> </tr> <tr class="hide-table-padding"> <td></td> <td colspan="3"> <div id="collapseTwo" class="collapse"> <div class="row"> <div class="col-sm-1"> <input type="checkbox" data-dojo-attach-point="checkBox" name="checkBox" id="checkbox" data-dojo-type="dijit.form.CheckBox" class="dijitCheckBox" value="check1"> </div> <div class="col-sm-2 text-nowrap sourceValue" id="sourceValue" name="sourceValue" data-dojo-attach-point="sourceValue" value="${emailItemTypeAttr.getSourceValue()}"> xyz </div> <div class="col-sm-2 text-nowrap" data-dojo-attach-point="userIdValue" name="userIdValue"> 2 </div> <div class="col-sm-2 text-nowrap" data-dojo-attach-point="objectId" name="objectId">3</div> </div> </td> </tr> </tbody> </table> </div>