使用OnClick隱藏此javascript函數Checklis有什么問題 <tr> 表和div

Question

我的代碼運行不正常

Java腳本

function CheckNik() {
  var tfnik = 'input[name="nik"]';
  var tfnonik = 'input[name="nonik"]';
  var nnik = tfnik;
  var nonik = tfnonik;
  var nn = $(nonik).is(':checked');
    if(nn) {
      $(nnik).val('0000000000000000');
      document.getElementById('divnik').style.display = 'none';
      document.getElementById('divdomisili').style.display = 'none';
    } else {
      $(nnik).val('');
      document.getElementById('divnik').style.display = 'block';
      document.getElementById('divdomisili').style.display = 'block';
    }
}

的HTML

<table>
            <tr>
              <td>NIK<span class="red">*</span></td>
              <td colspan="2">
                <div id="divnik" style="display:block">
                  <input type="text" name="nik" class="" style="" maxlength="16" id="nik">
                </div>
                <div style="margin-top: 10px; margin-left: -5px; display: block;" id="ceknik"> 
                  <input type="checkbox" name="nonik" id="nonik" onclick="javascript:CheckNik();">Tidak memiliki NIK
                </div>
              </td>
            </tr>
            <div id="divdomisili" style="display:block">
            <tr>
              <td>Domisili<span class="red">*</span></td>
                <td>

                  <select name="propinsi_mustahik" id="propinsi" style="width: 80px;" class="combo-box" onchange="get_cities(this.value);" >
                    <option value="">- Propinsi -</option>
                  </select>
                  <select name="kabupaten" id="kabupaten" class="select" style="width: 80px;" onchange="get_districts(this.value);" >
                  <option value="">- Kab -</option>
                  </select>
                  <input type="hidden" id="keca" name="keca">
                  <select name="kecamatan" id="kecamatan" class="select" style="width: 80px;" onchange="getListOfVillages(this.value);">
                  <option value="">- Kec -</option> 
                  </select>
              </td>
            </tr>
            </div>
</table>

這是我的演示代碼： https : //jsfiddle.net/kpLccfL4/

我不知道為什么當我選中復選框（帶有OnClick函數）時，不能將表和DIV一起隱藏，而只是DIV隱藏。

我想同時隱藏id="divnik"和id="divdomisili" 。 但是這段代碼只是隱藏了“ divnik

Answer 1

您的第二個代碼塊將是無效的html。 元素只能出現在一個元素內。 它們也可以是，的子元素，但是這些元素將需要是table元素的子元素。 因此，最終，tr需要一個表祖先。

Answer 2

此div divdomisili is not getting rendered properly on the page 。

這是因為格式不匹配！

you cannot embed a div inside <table></table> element directly.

您可以嘗試使用它而不是html：

 function CheckNik() { var tfnik = 'input[name="nik"]'; var tfnonik = 'input[name="nonik"]'; var nnik = tfnik; var nonik = tfnonik; var nn = $(nonik).is(':checked'); if (nn) { $(nnik).val('0000000000000000'); document.getElementById('divnik').style.display = 'none'; document.getElementById('divdomisili').style.display = 'none'; } else { $(nnik).val(''); document.getElementById('divnik').style.display = 'block'; document.getElementById('divdomisili').style.display = 'block'; } } 

 //Including JQuery <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> //Html Code Here <table> <tr> <td>NIK<span class="red">*</span> </td> <td colspan="2"> <div id="divnik" style="display:block"> <input type="text" name="nik" class="" style="" maxlength="16" id="nik"> </div> <div style="margin-top: 10px; margin-left: -5px; display: block;" id="ceknik"> <input type="checkbox" name="nonik" id="nonik" onclick="javascript:CheckNik();">Tidak memiliki NIK </div> </td> </tr> </table>//Closed the table //The Malfunctioning Div <div id="divdomisili" style="display:block"> <table> <tr> <td>Domisili<span class="red">*</span> </td> <td> <select name="propinsi_mustahik" id="propinsi" style="width: 80px;" class="combo-box" onchange="get_cities(this.value);"> <option value="">- Propinsi -</option> </select> <select name="kabupaten" id="kabupaten" class="select" style="width: 80px;" onchange="get_districts(this.value);"> <option value="">- Kab -</option> </select> <input type="hidden" id="keca" name="keca"> <select name="kecamatan" id="kecamatan" class="select" style="width: 80px;" onchange="getListOfVillages(this.value);"> <option value="">- Kec -</option> </select> </td> </tr> <table> </div> </table> 

Answer 3

<table>
        <tr>
          <td>NIK<span class="red">*</span></td>
          <td colspan="2">
            <div id="divnik" style="display:block">
              <input type="text" name="nik" class="" style="" maxlength="16" id="nik">
            </div>
            <div style="margin-top: 10px; margin-left: -5px; display: block;" id="ceknik"> 
              <input type="checkbox" name="nonik" id="nonik" onclick="javascript:CheckNik();">Tidak memiliki NIK
            </div>
          </td>
        </tr>
        <tr id="divdomisili" style="display:block">
          <td>Domisili<span class="red">*</span></td>
            <td>

              <select name="propinsi_mustahik" id="propinsi" style="width: 80px;" class="combo-box" onchange="get_cities(this.value);" >
                <option value="">- Propinsi -</option>
              </select>
              <select name="kabupaten" id="kabupaten" class="select" style="width: 80px;" onchange="get_districts(this.value);" >
              <option value="">- Kab -</option>
              </select>
              <input type="hidden" id="keca" name="keca">
              <select name="kecamatan" id="kecamatan" class="select" style="width: 80px;" onchange="getListOfVillages(this.value);">
              <option value="">- Kec -</option> 
              </select>
          </td>
        </tr>
</table>

您不能在table內使用div

Answer 4

您的問題在第二個div塊中。 您的第二個div必須在tr td內，但tr td在div內，而您的第一個div在tr td內，因此您的第二個div應該在tr td內

這是tr td內的第二個div塊。

<tr>
  <td>Domisili<span class="red">*</span></td>
    <td>
     <div id="divdomisili" style="display:block">
      <select name="propinsi_mustahik" id="propinsi" style="width: 80px;" class="combo-box" onchange="get_cities(this.value);" >
        <option value="">- Propinsi -</option>
      </select>
      <select name="kabupaten" id="kabupaten" class="select" style="width: 80px;" onchange="get_districts(this.value);" >
      <option value="">- Kab -</option>
      </select>
      <input type="hidden" id="keca" name="keca">
      <select name="kecamatan" id="kecamatan" class="select" style="width: 80px;" onchange="getListOfVillages(this.value);">
      <option value="">- Kec -</option> 
      </select>
      </div>
  </td>
</tr>

Answer 5

似乎在js代碼中有問題。 您無法使用代碼javascript選擇html元素，然后應用jQuery方法。 還可以在tr元素中使用id而不是div 。

試試這個代碼

的HTML

<tr id="divdomisili">
    <td>Domisili<span class="red">*</span></td>
    <td>
        <select name="propinsi_mustahik" id="propinsi" style="width: 80px;" class="combo-box" onchange="get_cities(this.value);" >
            <option value="">- Propinsi -</option>
        </select>
        <select name="kabupaten" id="kabupaten" class="select" style="width: 80px;" onchange="get_districts(this.value);" >
            <option value="">- Kab -</option>
        </select>
        <input type="hidden" id="keca" name="keca">
            <select name="kecamatan" id="kecamatan" class="select" style="width: 80px;"id="divdomisili" onchange="getListOfVillages(this.value);">
                  <option value="">- Kec -</option> 
            </select>
    </td>
</tr>

Javascript：

function CheckNik() {
      var tfnik = 'input[name="nik"]';
      var tfnonik = 'input[name="nonik"]';
      var nnik = tfnik;
      var nonik = tfnonik;
      var nn = document.getElementById("nonik").checked;

      if(nn) {
          nnik.value = '0000000000000000';
          document.getElementById('divnik').style.display = 'none';
          document.getElementById('divdomisili').style.display = 'none';
        } else {
          nnik.value = '';
          document.getElementById('divnik').s`enter code here`tyle.display = 'block';
          document.getElementById('divdomisili').style.display = 'block';
        }
    }