0

I have searched Stack Overflow and can't quite find the solution. I have this HTML and I want the JQuery to change the text in a box with an id = 'attrib-explain'

when the user clicks on the checkbox.

jQuery('#bapf_1').change(function() {
var privdesc = '<h3>New Title</h3>Clicked on 53';
      if(jQuery('#bapf_1_53').checked) {
        jQuery('#attrib-explain').html(privdesc);
    } else {
        jQuery('#attrib-explain').html('');
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="bapf_sfilter bapf_ckbox bapf_asradio bapf_radio_chck" data-op="OR" data-taxonomy="pa_age" data-name="AGE" id="bapf_1"><div class="bapf_head"><h3 style="--fontSize:24; line-height: 1.3;" data-fontsize="24" data-lineheight="31.2px" class="fusion-responsive-typography-calculated">AGE</h3></div><div class="bapf_body"><ul><li><input data-name="10+ years" id="bapf_1_56" type="checkbox" value="56"><label for="bapf_1_56">10+ years</label></li><li class="checked"><input data-name="3 - 5 years" id="bapf_1_53" type="checkbox" value="53" ><label for="bapf_1_53">3 - 5 years</label></li><li><input data-name="5 - 7 years" id="bapf_1_54" type="checkbox" value="54"><label for="bapf_1_54">5 - 7 years</label></li><li><input data-name="7 - 10 years" id="bapf_1_55" type="checkbox" value="55"><label for="bapf_1_55">7 - 10 years</label></li></ul></div></div>
<div id='attrib-explain' style='padding:10px; background:#e2e2e2; width: 100%'>Text to go here</div>
Tania
  • 29
  • 4
  • https://stackoverflow.com/search?q=%5Bjquery%5D+get+checkbox+checked `if(jQuery('#bapf_1_53').checked)` -> `if (jQuery('#bapf_1_53').is(":checked"))` – freedomn-m Jul 20 '21 at 09:31
  • 2
    Does this answer your question? [Testing if a checkbox is checked with jQuery](https://stackoverflow.com/questions/4813219/testing-if-a-checkbox-is-checked-with-jquery) – freedomn-m Jul 20 '21 at 09:32
  • I've tried that in the live site here: https://dev.armyandspyparties.com.au/shop but it only works on the first click. If you change the selection it does not appear to fire off – Tania Jul 20 '21 at 09:51
  • 2
    I tested with a snippet (then deleted as duplicate question) - also works fine here: https://jsfiddle.net/7atqu3nj/ You're specifically checking for 3-5, so only that one affects the output, but toggling that affects the output fine. If your site has different code from the code provided here, it will work differently. – freedomn-m Jul 20 '21 at 09:55
  • 1
    Looks like you're using wordpress and it's running a post (or something) so your *input* is being *recreated*. This is a completely unrelated issue to the question being asked. Change `jQuery('#bapf_1').change(function()..` to `jQuery(document).on("change", "#bapf_1", function()...` – freedomn-m Jul 20 '21 at 09:57
  • 1
    See [event binding on dynamically created elements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – freedomn-m Jul 20 '21 at 10:00
  • You are correct @freedomn-m in that this works but unfortunately not in the live site. Must be conflicting with other code :( If you can see what the problem is I'd be so happy. – Tania Jul 20 '21 at 10:04
  • Yes, details already added above - use event delegation – freedomn-m Jul 20 '21 at 10:23
  • All perfect. The last change got it working. Thank you so much! – Tania Jul 20 '21 at 10:24

1 Answers1

1
jQuery('#bapf_1').change(function() {
var privdesc = '<h3>New Title</h3>Clicked on 53';
      if(jQuery('#bapf_1_53').is(":checked")) {
        jQuery('#attrib-explain').html(privdesc);
    } else {
        jQuery('#attrib-explain').html('');
    }
});

jQuery('#bapf_1_53').checked will not work, the actual syntax is jQuery('#bapf_1_53').is(":checked")

Kavitha K T
  • 119
  • 8