Question

我是Javascript的初学者。

我有4个单选按钮：

House
公寓
平房
商业

和2个输入字段：

房间：
卧室：

点击House，Flat，Bungalow，我想隐藏房间并显示输入字段卧室点击商业广告我想隐藏卧室并显示房间。

请参阅下面的代码：

HTML CODE：

<table id="CurrentProperty">
    <tr>
        <td colspan="3">
            <label>Type of Property:</label>
            <br/>
            <input type="radio" id="showBedrooms" value="bedrooms" name="fromType" checked="checked" />House
            <input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Flat / Appartment
            <input type="radio" id="showBedrooms" value="bedrooms" name="fromType" />Bungalow
            <input type="radio" id="showRooms" value="rooms" name="fromType" />Commercial</td>
    </tr>
    <tr class="showCta">
        <td colspan="3">
            <label>Rooms:</label>
            <input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" />
        </td>
    </tr>
    <tr class="showTr">
        <td colspan="3">
            <label>Bedrooms:</label>
            <input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
        </td>
    </tr>
</table>

JAVASCRIPT：

$(window).load(function () {
    $('#showBedrooms').on('click', function () {
        $('.showCta').hide();
    });
});

$(window).load(function () {
    $('#showRooms').on('click', function () {
        $('.showCta').show();
    });
});

Answer 1

JS应该像

function update (el) {
    var $rooms = $('tr.showCta');
    var $bedrooms = $('tr.showTr');

    if (el.checked && el.value === 'bedrooms') {
        $rooms.hide();
        $bedrooms.show();
    } else {
        $rooms.show();
        $bedrooms.hide();
    }
}

$(function () {
    //get initial state.
    update($('input:checked')[0]);
    $('input[name="fromType"]').change(function () {
        update(this);
    });
});

jsFiddle http://jsfiddle.net/bj4Lx7ms/

Answer 2

在您的情况下，来自jquery的用户change。将事件处理程序绑定到“更改”JavaScript事件，或在元素（您的radiobuttons）上触发该事件。使用$(this).val()，您可以从value属性中获取值，以检查值是否为卧室。然后调用方法显示或隐藏，如下例所示：

$(document).ready(function () {
    $('input:radio[name="fromType"]').change(function(){
        if($(this).val() == 'bedrooms'){
           $('.showCta').hide();
           $('.showTr').show();
        }else if ($(this).val() == 'rooms'){
            $('.showCta').show();
            $('.showTr').hide();
        }
    });
});

隐藏showCta tr默认为：

<tr class="showCta" style="display:none">

Here my JsFiddle-example

Answer 3

JAVASCRIPT：

$( document ).ready(function () {
    $('#showBedrooms').on('click', function () {
        $('.showCta').hide();
    });
    $('#showRooms').on('click', function () {
        $('.showCta').show();
    });
});

加载文档并设置onclick handlder

我认为你应该设置

<tr class="showCta">

到

<tr class="showCta" style="display:none;">

Answer 4

＆＃13;

$(window).load(function () { /* You don't need to call twice this function, just wrap all your function in it */
    function hideRooms() {
      $("#rooms").hide(0);
      $("#bedrooms").fadeIn(250);
    }
  
    function hideBedrooms() {
      $("#bedrooms").hide(0);
      $("#rooms").fadeIn(250);
    }
  
    $("#label").text("House selected");
  
    hideRooms(); /* Hidding at start of website */
  
    $("#showBedrooms_house").change(function() {      
      $("#label").text("House selected");
      if (this.checked) {
        hideRooms();        
      }
    });
  
    $("#showBedrooms_flatAppart").change(function() {
      $("#label").text("Flat / Appartment selecrted");
      if (this.checked) {
        hideRooms();
      }
    });
  
    $("#showBedrooms_bungalow").change(function() {
      $("#label").text("Bungalow selected");
      if (this.checked) {
        hideRooms();
      }
    });
  
    $("#showRooms_commercial").change(function() {
      $("#label").text("Commercial selected");
      if (this.checked) {
        hideBedrooms();
      }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="CurrentProperty">
    <tr>
        <td colspan="3">
            <label>Type of Property:</label>
            <br/>
            <input type="radio" id="showBedrooms_house" value="bedrooms" name="fromType" checked="checked" />House
            <input type="radio" id="showBedrooms_flatAppart" value="bedrooms" name="fromType" />Flat / Appartment
            <input type="radio" id="showBedrooms_bungalow" value="bedrooms" name="fromType" />Bungalow
            <input type="radio" id="showRooms_commercial" value="rooms" name="fromType" />Commercial</td>
    </tr>
    <tr class="showCta" id = "rooms">
        <td colspan="3">
            <label>Rooms:</label>
            <input name="fromRooms" lable="From Rooms" type="text" class="body" ID="fromRooms" size="10" />
        </td>
    </tr>
    <tr class="showTr" id = "bedrooms">
        <td colspan="3">
            <label>Bedrooms:</label>
            <input name="fromBedrooms" lable="From Bedrooms" type="text" class="body" ID="fromBedrooms" size="10" />
        </td>
    </tr>
    <tr>
        <td style ="color : blue">
          <label id ="label"></label>
        </td>
    </tr>
</table>

＆＃13;

使用HTML和Javascript使用4个单选按钮显示和隐藏输入字段

4 个答案: