Скрыть и показать введенный текст с помощью двух переключателей - PullRequest
Новая
       12

Скрыть и показать введенный текст с помощью двух переключателей

0 голосов
/ 29 июня 2019

, если я нажимаю радио-кнопку deskripsi ввод name не скрывать, а если я нажимаю радио-кнопку name ввод deskripsi не скрывать 

<div class="mdl-textfield check-modif mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="check-modif">
    <label class="mdl-textfield__label" for="check-modif">Nama atau Kode barang</label>
</div>
<label class="mdl-radio radio-modif-name mdl-js-radio mdl-js-ripple-effect" for="update-name">
    <input type="radio" id="update-name" class="mdl-radio__button" name="options" value="1">
    <span class="mdl-radio__label">Nama</span>
</label>
<label class="mdl-radio radio-modif-description mdl-js-radio mdl-js-ripple-effect" for="update-description">
    <input type="radio" id="update-description" class="mdl-radio__button" name="options" value="2">
    <span class="mdl-radio__label">Deskripsi</span>
</label>

<script>
    $(function() {
        $('div[name="nama"]').hide();

        //show it when the checkbox is clicked
        $('input[id="update-name"]').on('click', function() {
            if ($(this).prop('checked')) {
                $('div[name="nama"]').fadeIn();
            } else if ($('input[id="update-description"]').on('click')) {
                $('div[name="nama"]').hide();
            } else {
                $('div[name="nama"]').hide();
            }

        });

        $('div[name="deskripsi"]').hide();

        $('input[id="update-description"]').on('click', function() {
            if ($(this).prop('checked')) {
                $('div[name="deskripsi"]').fadeIn();
            } else if ($('input[id="update-name"]').on('click')) {
                $('div[name="deskripsi"]').hide();
            } else {
                $('div[name="deskripsi"]').hide();
            }

        });
    });
</script>
<div class="mdl-textfield input-modif-name mdl-js-textfield" name="nama">
    <input class="mdl-textfield__input" type="text" id="nama" name="nama">
    <label class="mdl-textfield__label" for="nama">Nama</label></input>
</div>
<div class="mdl-textfield input-modif-description mdl-js-textfield" name="deskripsi">
    <input class="mdl-textfield__input" type="text" id="deskripsi" name="deskripsi">
    <label class="mdl-textfield__label" for="deskripsi">Deskripsi</label></input>
</div>

Спасибо

Ответы [ 2 ]

1 голос
/ 29 июня 2019

name атрибут существует во входных элементах формы, связанных с веб-запросами (другими словами, когда идентификация данных выполняется на стороне сервера), в основном это элементы формы.

Вы можете определитьопределенный div элемент с атрибутом id (который должен быть uniq в текущем документе) или класс, если логика касается нескольких элементов.

Вот предложение реализации:

$(function() {
      // Cache references to both radio inputs at the top of the DOM-ready
      // event handler making further logic clearer
      let $nameInput = $('input#update-name')
          , $descInput = $('input#update-description')
      ;

      // Attach a single click event handler to both former radio inputs.
      // Depending on which radio button is clicked, the associated content
      // will be shown whereas the content associated to the other radio
      // button will be hidden
      $nameInput.add($descInput).on('click', function() {
          let isName = this === $nameInput[0]
              , $show = isName ? $('#nama-div') : $('#deskripsi-div')
              , $hide = isName ? $('#deskripsi-div') : $('#nama-div')
          ;

          if (this.checked) {
              $show.fadeIn();
              $hide.hide();
          }
      });
  });
/** Set initial _display_ state of both content div as a CSS rule **/
div#nama-div, div#deskripsi-div {display: none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mdl-textfield check-modif mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="check-modif">
    <label class="mdl-textfield__label" for="check-modif">Nama atau Kode barang</label>
</div>

<label class="mdl-radio radio-modif-name mdl-js-radio mdl-js-ripple-effect" for="update-name">
    <input type="radio" id="update-name" class="mdl-radio__button" name="options" value="1">
    <span class="mdl-radio__label">Nama</span>
</label>

<label class="mdl-radio radio-modif-description mdl-js-radio mdl-js-ripple-effect" for="update-description">
    <input type="radio" id="update-description" class="mdl-radio__button" name="options" value="2">
    <span class="mdl-radio__label">Deskripsi</span>
</label>


<!-- changed name="nama" to id="nama-div" -->
<div class="mdl-textfield input-modif-name mdl-js-textfield" id="nama-div">
    <input class="mdl-textfield__input" type="text" id="nama" name="nama">
    <label class="mdl-textfield__label" for="nama">Nama</label></input>
</div>
<!-- changed name="deskripsi" to id="deskripsi-div" -->
<div class="mdl-textfield input-modif-description mdl-js-textfield" id="deskripsi-div">
    <input class="mdl-textfield__input" type="text" id="deskripsi" name="deskripsi">
    <label class="mdl-textfield__label" for="deskripsi">Deskripsi</label></input>
</div>
1 голос
/ 29 июня 2019

Вам нужно присвоить атрибут class или id для div, вы не можете использовать атрибут name для div, в вашем случае nama и deskripsi. В приведенном ниже коде я дал class атрибут для обоих divs, который вы хотите скрыть при щелчке на определенной переключателе: 

$(function() {
        $('.nama').hide();

        //show it when the checkbox is clicked
        $('input[id="update-name"]').on('click', function() {
            if ($(this).prop('checked')) {
              //show div with class="nama"
                $('.nama').fadeIn();
                 //hide other div
                 $('.deskripsi').hide();
            } else if ($('input[id="update-description"]').on('click')) {
              //hide div with class= "nama"
                $('.nama').hide();
            } else {
                $('.nama').hide();
            }

        });

        $('.deskripsi').hide();

        $('input[id="update-description"]').on('click', function() {
            if ($(this).prop('checked')) {
            //show div with class="deskripsi"
                $('.deskripsi').fadeIn();
                //hide other div
                 $('.nama').hide();
            } else if ($('input[id="update-name"]').on('click')) {
                $('.deskripsi').hide();
            } else {
                $('.deskripsi').hide();
            }

        });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="mdl-textfield check-modif mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="check-modif">
    <label class="mdl-textfield__label" for="check-modif">Nama atau Kode barang</label>
</div>
<label class="mdl-radio radio-modif-name mdl-js-radio mdl-js-ripple-effect" for="update-name">
    <input type="radio" id="update-name" class="mdl-radio__button" name="options" value="1">
    <span class="mdl-radio__label">Nama</span>
</label>
<label class="mdl-radio radio-modif-description mdl-js-radio mdl-js-ripple-effect" for="update-description">
    <input type="radio" id="update-description" class="mdl-radio__button" name="options" value="2">
    <span class="mdl-radio__label">Deskripsi</span>
</label>


<div class="nama mdl-textfield input-modif-name mdl-js-textfield" name="nama">
    <input class="mdl-textfield__input" type="text" id="nama" name="nama">
    <label class="mdl-textfield__label" for="nama">Nama</label></input>
</div>
<div class="mdl-textfield input-modif-description mdl-js-textfield deskripsi" name="deskripsi">
    <input class="mdl-textfield__input" type="text" id="deskripsi" name="deskripsi">
    <label class="mdl-textfield__label" for="deskripsi">Deskripsi</label></input>
</div>
...