Question

您好我正在尝试根据另一个元素的选择值显示隐藏输入元素。

但是我无法实现它。我不确定我在做什么。 JS Fiddle就在这里：

<div>
    <table>
        <tr id="type">
            <td height="30">Type</td>
            <td>
                <input type="radio" name="type" value="Document" checked>Document &nbsp;&nbsp;
                <input type="radio" name="type" value="Parcel">Parcel
            </td>
        </tr>
        </br>
        </br>

        <tr id="height">
            <td height="40">Approx weight of consignment</td>
            <td>

                <select name="weight">
                    <option selected>200gms</option>
                    <option>200 - 500gms</option>
                    <option>500 - 750gms</option>
                    <option>750gms - 1Kg</option>
                    <option>1Kg - 5Kg</option>
                    <option> > 5Kg</option>
                </select>
            </td>
        </tr>
    </table>
</div>
</br></br>

<div id="text"> text</div>

Jquery是：

$(document).ready(function () {
    if ($('#type').val() == "Parcel") {
        $('#height').show();
    }
    else {
        $('#height').hide();
    }
});

https://jsfiddle.net/rovvLt9e/1/

Answer 1

尝试使用change事件来完成您的任务，

$(document).ready(function() {
  var elem = $('#height');
  var radios = $(':radio[name=type]').change(function() {
    elem.toggle(radios.filter(":checked").val() == "Parcel");
  });
});

请注意，你必须在这里使用属性选择器，因为没有id类型的元素。

DEMO

Answer 2

没有标识为type的元素。将更改事件绑定到input[name=type]并切换可见性，如下所示。

$('input[name=type]').change(function() {
    $('#height').toggle(this.value=="Parcel");
});

$('input[name=type]:checked').change(); //to set initial state

UPDATED FIDDLE

Answer 3

尝试使用选择器#type input，.change()事件

$(document).ready(function() {
  var h = $("#height");
  $("#type input").change(function() {
    if (this.checked && this.value == "Parcel") {
      h.show();
    } else {
      h.hide();
    }
  }).change()
});

jsfiddle https://jsfiddle.net/rovvLt9e/6/

根据选择显示隐藏输入元素

3 个答案:

DEMO

UPDATED FIDDLE