Question

我有两个部分将在我的小提琴中显示。您选择产品的第一部分（A或B）。然后，无论何时选择选项，都会显示下一个按钮。当您单击下一步时，它将转到显示产品选择的第二部分。

我相信我的问题存在于我的更改函数或其中的语句中。基本上，我不确定我对以此开头的代码做错了什么：

  $('#package1, #package2').on('change', function () {
        if ($('#package1' && '#package2').prop("checked")) {

我想根据选择格式化第二部分（在选择产品之后）。我正在努力做的是，如果选择产品A和B仅在第二部分中显示产品A部分#pg-review-section并隐藏产品B部分#tp-selection。

基本上，如果选择了A和B，我不确定如何修改代码，但是我希望它在任何时候选择改变的情况下运行更改函数。

Here is a fiddle for demonstration.

以下代码是我正在努力的方法。

$('#package1', '#package2').on('change', function () {
    if ($('#package1' && '#package2').prop("checked")) {
        $('#pg-review-section').show();
        $('#tp-review-section').show();
        $('#tp-selection').hide();
        $('#tp-selection').fadeBoolToggle($('#calendar-preview-select option:selected'));
    }
});
$('#package1').on('change', function () {
    if ($('#package1').prop("checked")) {
        $('#pg-selection').show();
        $('#pg-review-section').show();
        $('#tp-review-section').hide();
    } else {
        $('#pg-selection').hide();
    }
});
$('#package2').on('change', function () {
    if ($('#package2').prop("checked")) {
        $('#tp-selection').show();
        $('#tpreview-section').show();
        $('#pg-review-section').hide();
    } else {
        $('#tp-selection').hide();
    }
});

更新：

$('#package1, #package2').on('change', function () {
     if ($('#package1').prop('checked') && $('#package2').prop('checked').length === 2) {
        $('#pg-review-section').show();
        $('#tp-review-section').show();
        $('#tp-selection').hide();
        $('#tp-selection').fadeBoolToggle($('#calendar-preview-select option:selected'));
    }
     else if ($('#package1').prop("checked") && !$('#package2').prop('checked')) {
        $('#pg-selection').show();
        $('#pg-review-section').show();
        $('#tp-review-section').hide();
    }
     else if ($('#package2').prop("checked") && !$('#package1').prop('checked')) {
        $('#tp-selection').show();
        $('#tp-review-section').show();
        $('#pg-review-section').hide();
    }
});

Answer 1

使用jquery选择器:checked并测试长度：

if ($('#package1:checked, #package2:checked').length === 2)

https://api.jquery.com/checked-selector/

Answer 2

在您的更新版本中，您缺少＆＃34; .length＆＃34;在你的第一个if语句中的package1上。

如果你想要的逻辑是：

a checked =＆gt;转到

部分

b checked =＆gt;转到b部分

都检查=＆gt;转到

部分

为什么不创建一个通用函数来添加到您的更改事件？类似的东西？

$('#package1').on('change', function () {
    myChangeFunction();
});
$('#package2').on('change', function () {
    myChangeFunction();
});
function myChangeFunction(){
   if ($('#package2').prop("checked") && $('#package1').prop("checked")){
      // show a and hide b
   }
   else if($('#package1').prop("checked")){
      // show a and hide b
   }
   else if($('#package2').prop("checked")){
      //  show b and hide a
   }
   else{
      //hide both
   }
}

更改函数中的多个元素问题

2 个答案: