javascript - Checkbox dynamic select with Gravity Forms

Question

I have a checkbox and want to say this checkbox: if (for example) “Einzelberatung BU” is selected and you want to select another field with the term “Einzelberatung…” then the field “Komplettes Finanzkonzept” automatically should be selected and the both other fields should be deselected.

As you can see I'm an absolute beginner with javascript. So hopefully someone can help me out with the code I pasted below and show me what I did wrong.

Thanks for your time, Leon

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>

标签： javascripthtmljquerylogicgravityforms

Answer 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>