更改功能中的多个元素问题

Question

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

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

  $('#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

在您的更新版本中，您在第一个 if 语句中的 package1 上缺少“.length”。

如果你想要的逻辑是：

选中 => 转到某个部分

b 检查 => 转到 b 部分

都选中 => 转到一个部分

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

$('#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
   }
}