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')

我希望能够选择“团队”单选按钮和“远程会话”按钮并隐藏/显示输入。

以下是图像：

正确：
[！[在此处输入图片描述] [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

以下内容不假定用户已按特定顺序选择了选择项，并且将评估要显示的字段，而与选择顺序无关。

我认为您需要考虑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();

    } 
}

您还可以使用case-switch语句执行相同的操作，但是当我的语句不超过if / elseif / else时，我通常无法达到case-switch。

Answer 2

这里是您可以尝试的一种好方法：

编写一个函数，该函数接受单选按钮组并返回选中的单选按钮的值
将事件监听器分离为一个功能，该功能查看每个表单组的检查值并相应地显示/隐藏输入
监听'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事件分配侦听器。

根据单选按钮显示/隐藏表单字段

2 个答案: