Question

我有一个单选按钮（学费），一旦点击，选项的附加单选按钮将显示文本字段。为什么单击其他按钮（完全学费或非全部学费）后它将关闭。所以发生了什么事？我无法输入文本字段。谁能告诉我它为什么关闭？

$( document ).ready(function() {
    $('.sub_list').css('display','none');
    $('input[type=radio]').change(function() {
        $('.sub_list').css('display','none');
        $('#'+this.value).css('display','block');
        console.log(this.value);
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<input id="test2" name="ship_need" type="radio" value="Tuition_fee"> Tution<br>

<div id="Tuition_fee" class="sub_list">
    <ul>
        <li>Tuition Fee</li>
        <input  name="Full" type="radio" value="Full"> Full Tuition Fee <br>
        <input name="Not_Full" type="radio" value="Not_Full"> Not Full Tution Fee
    </ul>

    <div class="col-lg-6 form-group">
        <label class="control-label">Money:</label>
        <input class="form-control" name="ship_money2" type="text">
    </div>
    <div class="col-lg-6 form-group">
        <label class="control-label">
            Location:
        </label>         
        <select class="form-control" name="ship_payment">
            <option value="Monthly">Monthly</option>
            <option value="Quarterly">Quarterly</option>
            <option value="6 Month">6 Month</option>
        </select>
    </div>
</div>

Answer 1

这是因为$('input[type=radio]').change(/* ... */)将更改事件监听器添加到所有单选按钮，即使是.sub_list

中的按钮也是如此

$('input[name=ship_need]').change(/* ... */)可能是您要添加更改事件侦听器的位置。

Answer 2

在change的{{1}}活动中，你正在做

input[type=radio]

在第一个单选按钮（ID为＃34; test2＆＃34;）时，$('.sub_list').css('display', 'none'); //[1] $('#'+this.value).css('display','block'); //[2]为＆＃34; Tuition_fee＆＃34;。

因此value设置为$(".sub_list")（在display: none上）。

然后，[1]设置为$("#Tuition_fee")（在display: block上;它是相同的元素，它发生得太快，所以它不明显）

但是，在您第二次单击单选按钮时（例如，＆＃34;完全学费和＃34;），该值为[2]。

因此，Full再次设置为.sub_list（在display: none上）。

然后[1]（不存在）设置为#Full（在display: block上）。没有ID为＃34; Full＆＃34;的元素，因此容器[2]保持为<div id="Tuition_fee" class="sub_list">。

单选按钮Javascript中的单选按钮

2 个答案: