Question

当用户选择某些值时，我试图隐藏和/或显示表单元素。例如，如果用户选择＆＃34;是＆＃34;对于同意问题，我需要它来表示一些问题，但是，如果他们改变对同意问题的回答，我需要它来隐藏这些问题。

这是我到目前为止所提出的......

$(document).ready(function () { 
    var input = document.getElementById('consent');
    var consent_responses = [{ "0": hideConsent },{ "1": showConsent }];
    input.addEventListner('click', function () {
        var consent_response;
        if (consent_responses[this.value]) {
            content_response = consent_responses[this.Function()]
        }
        else {
            content_response = consent_responses[this.Function]
        }
    });

    function showConsent(){
        $("#date").show(),
        $("#referrer").show(),
        $("#f_name").show(),
        $("#phone_num").show(),
        $("#leave_msg").show(),
        $("#email").show(),
    };
    function hideConsent(){
        $("#date").hide(),
        $("#referrer").hide(),
        $("#f_name").hide(),
        $("#phone_num").hide(),
        $("#leave_msg").hide(),
        $("#email").hide(),
    }; });

在这里小提琴：http://jsfiddle.net/7jX47/1/

Answer 1

这可以简化：

var input = document.getElementById('consent');
// Let's use the value as key, and the functions as values
var consent_responses = {
    "0" : hideConsent,
    "1" : showConsent
};
input.addEventListener("click", function () {
    // Get the appropriate function given the value, and invoke it
    consent_responses[this.value]();
});

function hideConsent() {
    // ...
}

function showConsent() {
    // ...
}

Answer 2

你可以这样做：JSFiddle

基本上我只修了一些拼写错误（你在发布这里之前是否实际尝试过你的代码？）并将事件监听器添加到单选按钮

document.getElementById(...).addEventListener(...)

我还给你的单选按钮提供了唯一的ID。

Answer 3

最好将 div 包含在＆＃34; .hidden＆＃34; 中，或将其隐藏起来（需要隐藏） style ＆＃34; display：none;＆＃34; 。只需在需要时将 div 指向 show（）或隐藏（），即可简化代码。

像这样：

<form id="screening">
<div class="col-md-12 col-sm-12 col-xs-12 nopad" id="create">
    <div class="form-group text-center">
        <b>Do you agree to answer the screening questions?</b><br />
        <div class="radio" id="consent">
            <label>
                <input type="radio" name="consent" id="consent" value="1">
                Yes, I consent
            </label>
        </div><br />
        <div class="radio">
            <label>
                <input type="radio" name="consent" id="consent" value="0">
                No, I do not consent
            </label>
        </div>
    </div>

<!-- simplify by using this -->
<div id="questions" style="display: none;">

    <div class="form-group" id="date">
        <label for="date">What is today's date?</label>
        <input type="date" class="form-control" id="date" name="date" />
    </div>
    <div class="form-group" id="referrer">
        <label for="referrer">How did you hear about us/our studies?</label>
        <select class="form-control" name="referrer" id="referrer">
            <option></option>
            <option value="1">Flyers</option>
            <option value="2">Print Media</option>
            <option value="3">A friend</option>
            <option value="4">Online (e.g., Craigslist)</option>
            <option value="5">Other</option>
        </select>
    </div>
    <div class="form-group" id="other_explain">
        <label for="other_explain">Please specify other source.</label>
        <textarea class="form-control" rows="3" id="other_explain" name="other_explain"></textarea>
    </div>
    <div class="form-group" id="f_name">
        <label for="f_name">What is your first name?</label>
        <input type="text" class="form-control" id="f_name" name="f_name" />
    </div>
    <div class="form-group" id="phone_num">
        <label for="phone_num">What is a phone number at which you can be contacted?   </label>
        <input type="tel" class="form-control" id="phone_num" name="phone_num" />
    </div>
    <div class="form-group" id="leave_msg">
        <label for="leave_msg">If we call and you are not available, may we leave a message?</label><br />
        <div class="radio">
            <label>
                <input type="radio" name="leave_msg" id="leave_msg" value="1">
                Yes
            </label>
        </div><br />
        <div class="radio">
            <label>
                <input type="radio" name="leave_msg" id="leave_msg" value="0">
                No
            </label>
        </div>
    </div>
    <div class="form-group" id="email">
        <label for="email">What is an e-mail at which you can be contacted?</label>
        <input type="email" class="form-control" id="email" name="email" />
    </div>
</div>
</div>
</form>

并在您的JavaScript中而不是使用此：

function showConsent(){
        $("#date").show(),
        $("#referrer").show(),
        $("#f_name").show(),
        $("#phone_num").show(),
        $("#leave_msg").show(),
        $("#email").show(),
    };

你使用：

function showConsent(){
        $("#questions").show(),
    };

Javascript根据用户输入值隐藏/显示问题

3 个答案: