带有重力形式的复选框动态选择

Posted 2023-05-08

【中文标题】带有重力形式的复选框动态选择

【英文标题】：Checkbox dynamic select with Gravity Forms

【发布时间】：2021-06-24 17:59:02

【问题描述】：

我有一个复选框，想要说这个复选框：如果（例如）选择了“Einzelberatung BU”，并且您想选择另一个带有术语“Einzelberatung...”的字段，那么应该自动选择字段“Komplettes Finanzkonzept”并且应该取消选择其他两个字段。

如您所见，我是 javascript 的绝对初学者。所以希望有人可以帮助我解决我在下面粘贴的代码，并告诉我我做错了什么。

感谢您的宝贵时间， 里昂

jQuery('#input_167_1 input[type="checkbox"]').on('click', function() 
  var $bu = jQuery('#choice_2_9_1');
  var $pkv = jQuery('#choice_2_9_2');
  var $etf = jQuery('#choice_2_9_3');
  var $fiko = jQuery('#choice_2_9_4');
  // Check Green if Rea & Blue are checked.
  if ($bu.is(':checked') && $etf.is(':checked')) 
    $bu.prop('checked', false);
    $pkv.prop('checked', false);
    $etf.prop('checked', false);
    $fiko.prop('checked', true);
   else if ($bu.is(':checked') && $pkv.is(':checked')) 
    $bu.prop('checked', false);
    $pkv.prop('checked', false);
    $etf.prop('checked', false);
    $fiko.prop('checked', true);
   else if ($pkv.is(':checked') && $etf.is(':checked')) 
    $bu.prop('checked', false);
    $pkv.prop('checked', false);
    $etf.prop('checked', false);
    $fiko.prop('checked', true);
  
  // Prevent Red & Blue from being checked if Green is checked.
  else if ($fiko.is(':checked')) 
    $bu.prop('checked', false);
    $pkv.prop('checked', false);
    $etf.prop('checked', false);
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="gfield_checkbox" id="input_2_9">
  <li class="gchoice_2_9_1">
    <input name="input_9.1" type="checkbox" value="Einzelberatung BU" id="choice_2_9_1">
    <label for="choice_2_9_1" id="label_2_9_1">Einzelberatung BU</label>
  </li>
  <li class="gchoice_2_9_2">
    <input name="input_9.2" type="checkbox" value="Einzelberatung PKV" id="choice_2_9_2">
    <label for="choice_2_9_2" id="label_2_9_2">Einzelberatung PKV</label>
  </li>
  <li class="gchoice_2_9_3">
    <input name="input_9.3" type="checkbox" value="Einzelberatung ETF Rente" id="choice_2_9_3">
    <label for="choice_2_9_3" id="label_2_9_3">Einzelberatung ETF Rente</label>
  </li>
  <li class="gchoice_2_9_4">
    <input name="input_9.4" type="checkbox" value="investmentplanung" id="choice_2_9_4">
    <label for="choice_2_9_4" id="label_2_9_4">investmentplanung</label>
  </li>
  <li class="gchoice_2_9_5">
    <input name="input_9.5" type="checkbox" value="Komplettes Finanzkonzept" id="choice_2_9_5">
    <label for="choice_2_9_5" id="label_2_9_5">Komplettes Finanzkonzept</label>
  </li>
  <li class="gchoice_2_9_6">
    <input name="input_9.6" type="checkbox" value="Anderese Anliegen" id="choice_2_9_6">
    <label for="choice_2_9_6" id="label_2_9_6">Anderese Anliegen</label>
  </li>
</ul>

【参考方案1】：

Tyr 下面的代码。我删除了#input_167_1 并将click 更改为change。

jQuery('input[type="checkbox"]').on('change', function() 
    var $bu = jQuery('#choice_2_9_1');
    var $pkv = jQuery('#choice_2_9_2');
    var $etf = jQuery('#choice_2_9_3');
    var $fiko = jQuery('#choice_2_9_4');
    // Check Green if Rea & Blue are checked.
    if ($bu.is(':checked') && $etf.is(':checked')) 
        $bu.prop('checked', false);
        $pkv.prop('checked', false);
        $etf.prop('checked', false);
        $fiko.prop('checked', true);
     else if ($bu.is(':checked') && $pkv.is(':checked')) 
        $bu.prop('checked', false);
        $pkv.prop('checked', false);
        $etf.prop('checked', false);
        $fiko.prop('checked', true);
     else if ($pkv.is(':checked') && $etf.is(':checked')) 
        $bu.prop('checked', false);
        $pkv.prop('checked', false);
        $etf.prop('checked', false);
        $fiko.prop('checked', true);
    
    // Prevent Red & Blue from being checked if Green is checked.
    else if ($fiko.is(':checked')) 
        $bu.prop('checked', false);
        $pkv.prop('checked', false);
        $etf.prop('checked', false);
    
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="gfield_checkbox" id="input_2_9">
    <li class="gchoice_2_9_1">
        <input name="input_9.1" type="checkbox" value="Einzelberatung BU" id="choice_2_9_1">
        <label for="choice_2_9_1" id="label_2_9_1">Einzelberatung BU</label>
    </li><li class="gchoice_2_9_2">
        <input name="input_9.2" type="checkbox" value="Einzelberatung PKV" id="choice_2_9_2">
        <label for="choice_2_9_2" id="label_2_9_2">Einzelberatung PKV</label>
    </li><li class="gchoice_2_9_3">
        <input name="input_9.3" type="checkbox" value="Einzelberatung ETF Rente" id="choice_2_9_3">
        <label for="choice_2_9_3" id="label_2_9_3">Einzelberatung ETF Rente</label>
    </li><li class="gchoice_2_9_4">
        <input name="input_9.4" type="checkbox" value="investmentplanung" id="choice_2_9_4">
        <label for="choice_2_9_4" id="label_2_9_4">investmentplanung</label>
    </li><li class="gchoice_2_9_5">
        <input name="input_9.5" type="checkbox" value="Komplettes Finanzkonzept" id="choice_2_9_5">
        <label for="choice_2_9_5" id="label_2_9_5">Komplettes Finanzkonzept</label>
    </li><li class="gchoice_2_9_6">
        <input name="input_9.6" type="checkbox" value="Anderese Anliegen" id="choice_2_9_6">
        <label for="choice_2_9_6" id="label_2_9_6">Anderese Anliegen</label>
    </li>
</ul>

【讨论】：

嘿@Bhautik，哇，效果很好。非常感谢你的帮助！对此，我真的非常感激。最好的，莱昂