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，不能将name的{{1}}属性用于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();
            }

        });
    });

Answer 2

name attribute存在于与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>

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

2 个答案: