Question

我有3个单选按钮，当选择单选按钮'Up'时，它将显示'productionUp'范围，当选择单选按钮'down'时，'productionUp'将隐藏，'productionDown'跨度将显示

我希望两者在选择“相同”时隐藏，但我不确定我所做的是否是最有效的方式。这是HTML代码

<fieldset>
        <legend>Production</legend>
        <p>Was your production level in October versus September 2013....</p>
        <input type="radio" name="production-level" value="Up">Up<br />
        <input type="radio" name="production-level" value="Same">Same<br />
        <input type="radio" name="production-level" value="Down">Down
        <p>Note: PRODUCTION level meaning the level of overall production this month measured in units as compared  to last month.</p>

        <span id='productionUp' class='level'>
            <p>Production - Reasons why it is up. Click as many as apply.</p>
            <input type="checkbox" name="production-why-up" value="Increase in demand">Increase in demand <br/>
            <input type="checkbox" name="production-why-up" value="Expected increase in demand">Expected increase in demand <br/> 
            <input type="checkbox" name="production-why-up" value="Fullfillment of past orders">Fulfillment of past orders <br/>
            <input type="checkbox" name="production-why-up" value="Increased marketing activity">Increased marketing activity <br/>
            Other: <input type="text" />
        </span>

        <span id='productionDown' class='level'>
            <p>Production - Reasons why it is down. Click as many as apply.</p>
            <input type="checkbox" name="production-why-down" value="Decrease in demand">Decrease in demand <br>
            <input type="checkbox" name="production-why-down" value="Expected Decrease in demand">Expected Decrease in demand <br/> 
            <input type="checkbox" name="production-why-down" value="Technical difficulties in production">Technical difficulties in production <br/>
            <input type="checkbox" name="production-why-down" value="Shortage in raw materials">Shortage in raw materials <br/>
            Others: <input type="text" />
        </span>

    </fieldset>

javascript代码

$(document).ready(function(){

    // Production Level
    $("input[name = 'production-level']").click(function() {
        var production = $(this).val();
        var opposite = '';

        if(production == 'Up') { 
            opposite = 'Down'; 
            $("#production" + opposite).hide();
            $("#production" + production).show();
        }
        else if (production == 'Down') { 
            opposite = 'Up'; 
            $("#production" + opposite).hide();
            $("#production" + production).show();
        }
        else {
            $("#productionUp").hide();
            $("#productionDown").hide();
        }

    });
});

如果你看看这个，你会选择隐藏它们，即使已经隐藏了一个，我想不出有任何其他方法可以有效地隐藏选定的一个。请指教。

else {
     $("#productionUp").hide();
     $("#productionDown").hide();
}

Answer 1

试试这个：

$(document).ready(function(){
    // Production Level
    $("input[name='production-level']").on('change', function() {
        var production = this.value;
        if(production == 'Up') { 
            $(this).closest('fieldset').find(".level").hide();
            $("#production" + production).show();
        } else if (production == 'Down') { 
            $(this).closest('fieldset').find(".level").hide();
            $("#production" + production).show();
        } else {
            $(this).closest('fieldset').find(".level").hide();
        }
    });
});

尝试使用.level className隐藏，这两个版本都是常见的，并且正如您所做的那样显示，但稍微改变就是使用change事件代替click。

Answer 2

显示隐藏单选按钮上的范围

$('.level').hide();
$('input[name=production-level]').on('click', function () {
    var value = $(this).attr('value');
    if (value == 'Same') {
        $('.level').hide();
    } else {
        $('.level').hide();
        $('#production' + value).show();
    }
});

请参阅this

Answer 3

为什么不使用CSS？

input[value="Up"]:checked ~ #productionDown {
    display: none;
}

如果您需要IE8和更低支持（不知道伪类选择器:checked，您可以使用jQuery / vanillaJS为您的radiobuttons切换类.checked。

.checked ~ #productionDown {
    display: none;
}

这是example。

Answer 4

或者某种硬编码会做

else {
if ($("#productionUp").css('display') == 'inline') { // where i've figured that display is turning inline and none.
   $("#productionUp").hide();
} 
else if ($("#productionDown").css('display') == 'inline') {
   $("#productionDown").hide();
}
}

工作Fiddle

如果未选择，则隐藏2个跨度

4 个答案: