使用两个无线电按钮隐藏并显示输入文本

Question

如果我单击"单击单击"按钮deskripsi输入name不隐藏，并且如果我单击"单击单击"按钮name INPUT 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>

谢谢

Answer 1

name属性在与Web请求关联的元素上存在(换句话说，当数据标识完成服务器端时(，主要是表单元素。

您可以使用 id 属性(应该在当前文档中为uniq(识别特定的div元素，或者如果逻辑涉及几个元素，则类别。

。

这是实施的建议：

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

Answer 2

您需要将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>