使用两个单选按钮隐藏和显示输入文本

Question

如果我单击单选按钮 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>

谢谢

Answer 1

您需要将 class 或 id 属性赋予 div，您不能对 div 使用 name 属性，在您的情况下 [=17] =] 和 deskripsi 。在下面的代码中，我为 divs 提供了 class 属性，你想隐藏特定单选按钮的 onclick :

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

Answer 2

name attribute 存在于与 Web 请求关联的表单输入元素上（换句话说，当数据识别完成时 server-side），主要是表单元素。

您可以使用 id 属性（在当前文档中应该是 uniq）来标识特定的 div 元素，或者 class 如果逻辑涉及几个要素。

以下是实施建议：

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

使用两个单选按钮隐藏和显示输入文本

Hide and show input text using two radio buttons

jquery

material-design-lite