Показать / скрыть многослойный переключатель - неопределенный статус - PullRequest
Новая
       1

Показать / скрыть многослойный переключатель - неопределенный статус

1 голос
/ 16 марта 2020

Для приведенного ниже примера: 

<!DOCTYPE html>


<html lang="en">
<head>
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' />
    <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/js/bootstrap4-toggle.min.js"></script>
</head>
<body>

<table class="table table-sm table-borderless table-dark text-center mt-5">
    <tbody>
        <tr class="all advanced_ecommerce table-secondary small" style=" height: 50%;">
            <td colspan="2" class="text-body">
                Header
            </td>
            <td>
            </td>
        </tr>
        <tr class="all advanced_ecommerce" style="">
            <td class="label_column">
            </td>
            <td class="data_column" width="auto">
                <input class="h1_header_competitor_1" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-size="small"
                           data-onstyle="success" data-offstyle="danger" name="h1_header_competitor_1">
            </td>
        </tr>
        <tr class="h1_no_header_competitor_1" style="display: none;">
            <td class="label_column">
                Data show
            </td>
            <td class="data_column" width="auto">
                <input type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-size="small"
                           data-onstyle="success" data-offstyle="danger" name="h1_no_header_competitor_1" checked="checked">
            </td>
        </tr>
        <tr class="h1_no_header_competitor_1_list" style="display: none;">
            <td class="label_column">
                Data
            </td>
            <td width="auto">
                <textarea class="form-control" rows="3" name="h1_no_header_competitor_1_list" style="max-width: 75%"></textarea>
            </td>
        </tr>
    </tbody>
</table>
</body>

<script>
    $(document).ready(function(){
        $('.h1_header_competitor_1').change(function(){
            console.log($(this).prop("checked"));
            jQuery('.h1_no_header_competitor_1').toggle('slow');
        });
        $('.h1_no_header_competitor_1').change(function(){
            console.log($(this).prop("checked"));
            jQuery('.h1_no_header_competitor_1_list').toggle('slow');
        });
    });
</script>

</html>

Вопрос

Почему второй переключатель возвращает undefined на тумблере?

Ответы [ 2 ]

1 голос
/ 16 марта 2020

, так как tr не проверен, 

<!DOCTYPE html>


<html lang="en">
<head>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' />
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/js/bootstrap4-toggle.min.js"></script>
</head>


    <table class="table table-sm table-borderless table-dark text-center mt-5">
   <tbody>
      <tr class="all advanced_ecommerce table-secondary small" style=" height: 50%;">
          <td colspan="2" class="text-body">
            Header
          </td>
          <td>
        </td>
      </tr>
      <tr class="all advanced_ecommerce" style="">
          <td class="label_column">
          </td>
          <td class="data_column" width="auto">
              <input class="h1_header_competitor_1" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-size="small"
                       data-onstyle="success" data-offstyle="danger" name="h1_header_competitor_1">
        </td>
    </tr>
    <tr class="new_x_class" style="display: none;">
        <td class="label_column">
            Data show
        </td>
        <td class="data_column" width="auto">
            <input type="checkbox" class='h1_no_header_competitor_1' data-toggle="toggle" data-on="No" data-off="Yes" data-size="small"
                       data-onstyle="success" data-offstyle="danger" name="h1_no_header_competitor_1" checked="checked">
        </td>
    </tr>
    <tr class="h1_no_header_competitor_1_list" style="display: none;">
        <td class="label_column">
            Data
        </td>
        <td width="auto">
            <textarea class="form-control" rows="3" name="h1_no_header_competitor_1_list" style="max-width: 75%"></textarea>
        </td>
    </tr>
</tbody>


    <script>
            $(document).ready(function(){
         $('.h1_header_competitor_1').change(function(){
                console.log($(this).prop("checked"));
          jQuery('.new_x_class').toggle('slow');
         });
            $('.h1_no_header_competitor_1').on('change',function(){
                 console.log($(this).prop("checked"));
             jQuery('.h1_no_header_competitor_1_list').toggle('slow');
            });
        });
     </script>

   </html>
1 голос
/ 16 марта 2020

Что-то вроде ниже фрагмента. 

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' />
    <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/js/bootstrap4-toggle.min.js"></script>
</head>
<body>

<table class="table table-sm table-borderless table-dark text-center mt-5">
  <tbody>
    <tr class="all advanced_ecommerce table-secondary small" style=" height: 50%;">
      <td colspan="2" class="text-body">
        Header
      </td>
      <td>
      </td>
    </tr>
    <tr class="all advanced_ecommerce" style="">
      <td class="label_column"></td>
      <td class="data_column" width="auto">
        <input class="h1_header_competitor_1" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-size="small" data-onstyle="success" data-offstyle="danger" name="h1_header_competitor_1">
      </td>
    </tr>
    <tr class="h1_no_header_competitor_1" style="display: none;">
      <td class="label_column">Data show</td>
      <td class="data_column" width="auto">
        <input class="h1_no_header_competitor_2" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-size="small" data-onstyle="success" data-offstyle="danger" name="h1_no_header_competitor_1" checked="checked">
      </td>
    </tr>
    <tr class="h1_no_header_competitor_1_list" style="display: none;">
      <td class="label_column">Data</td>
      <td width="auto">
        <textarea class="form-control" rows="3" name="h1_no_header_competitor_1_list" style="max-width: 75%"></textarea>
      </td>
    </tr>
  </tbody>
</table>


<script>
$(document).ready(function(){
  $('.h1_header_competitor_1').change(function(){
    console.log($(this).prop("checked"));
    jQuery('.h1_no_header_competitor_1').toggle('slow');
  });
  $('.h1_no_header_competitor_2').change(function(){
    console.log($(this).prop("checked"));
    jQuery('.h1_no_header_competitor_1_list').toggle('slow');
  });
});
</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...