Показать / скрыть поля формы на основе переключателя

Question

Есть ли возможный способ нацеливания на два входа одновременно?

У меня есть два набора переключателей, в которых я хочу скрыть поля ввода на основе комбинированного выбора.

How can I take the below code and combine both:

$('input[name=requestType]').click(function() {
                if(this.value == 'Team')

$('input[name=sessionType]').click(function() {
                    if(this.value == 'Remote Session')

Я хочу иметь возможность выбрать радиокнопку Team и кнопку Remote Session и скрыть / показать входы.

Вот изображения:

Правильно:
[! [введите описание изображения здесь] [2]] [2]

Правильно:
[! [введите описание изображения здесь] [3]] [3]

Неправильно:
[! [введите описание изображения здесь] [4]] [4]

Вот код:

$(document).ready(function () {
    $('input[name=requestType]').click(function() {
        if(this.value == 'Team')
        {
            $(".total").show();
            $(".teamname").show();
            $(".one").show();
            $(".two").show();
            $(".three").show();
            $(".four").show();
            $(".five").show();
        }
        else
        {
            $(".teams").hide();
        }
    });

Answer 1

Вот хороший подход, который вы можете попробовать:

• Напишите функцию, которая принимает группу переключателей и возвращает значение отмеченного переключателя
• Отделение прослушивателя событий отк функции, которая просматривает проверенное значение каждой группы форм и показывает / скрывает входные данные соответственно
• Прослушивает событие 'change' вместо события 'click', так что вы можете быть уверены, что какое-то значение переключателяобновлен вместо запуска прослушивателя событий, когда пользователь нажимает переключатель, который уже отмечен.

Вы также должны сохранять каждый вход в переменную, чтобы не выполнять глобальный селектор jQuery каждый раз.Селектор требует времени, чтобы найти правильный элемент, и если вы измените селектор в будущем, вам не придется искать везде, где вы выполняете поиск jQuery.Также будет полезно сохранить все входных данных для быстрого массового отображения / скрытия.

Полученный код будет выглядеть примерно так:

// it is helpful to start each jQuery object variable name with a $ for clarity
var $container = $('.container'); // should probably add a more specific class to the container
var $requestTypeRadioBtns = $container.find('input[type="requestType"]');
var $sessionTypeRadioBtns = $container.find('input[type="sessionType"]');

var $requester = $container.find('.requester');
var $total = $container.find('.total');
var $teamName = $container.find('.teamname');
// etc...
var $teams = $container.find('.teams');

var $inputs = $([$requester, $total, $teamName, /* etc... */]);

function getRadioGroupValue($radioBtns) {
    // .find only looks through child elements, so use .filter which checks the current elements
    return $radioBtns.filter(':checked').val();
}

function radioGroupChangedListener() {
    var requestType = getRadioGroupValue($requestTypeRadioBtns);
    var sessionType = getRadioGroupValue($sessionTypeRadioBtns);

    $inputs.hide();

    if (requestType === 'Single User') {
        $requester.show();
    } else if (sessionType === 'Remote Session') {
        $requester.show();
        $teamName.show();
    } else {
        $inputs.show();
    }
}

$requestTypeRadioBtns.change(radioGroupChangedListener);
$sessionTypeRadioBtns.change(radioGroupChangedListener);

Редактировать:Забыл включить назначение слушателя для события change каждой группы переключателей.

Answer 2

Следующее не предполагает, что пользователь выбрал выбор в определенном порядке, и будет оценивать отображаемые поля независимо от того, в каком порядке они были выбраны.

Я считаю, что вам нужно учесть 3 комбинации:

• (если) requestType == 'Team' && sessionType == 'Live Session'
• (elseif) requestType == 'Team'
• (еще) requestType !== 'Team'

Попробуйте и посмотрите, работает ли он для вас.

$(document).ready(function () {
    $('input[name=requestType]').click(function() {
         toggleTeamsFields();
    });

    $('input[name=sessionType]').click(function(){
         toggleTeamsFields();
    });
});

function toggleTeamsFields(){

    if($('input[name=requestType]').value == 'Team' && if($('input[name=sessionType]').value == 'Live Session'){

        $(".total").show();
        $(".teamname").show();
        $(".one").show();
        $(".two").show();
        $(".three").show();
        $(".four").show();
        $(".five").show();

    }elseif($('input[name=requestType]').value == 'Team'){

        $(".teams").hide();
        $(".teamname").show();

    }else{

        $(".teams").hide();

    } 
}

вы также можете использовать оператор переключения регистра, чтобы сделать то же самое, но когда мои утверждения не больше, чем if / elseif / else, я обычно не достигаю переключения регистра.