JQuery and checkbox change

Question

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>

stackoverflow.com/search?q=%5Bjquery%5D+get+checkbox+checked if(jQuery('#bapf_1_53').checked) -> if (jQuery('#bapf_1_53').is(":checked")) — fdomn-m
– fdomn-m, Commented Jul 20, 2021 at 9:31
Does this answer your question? Testing if a checkbox is checked with jQuery — fdomn-m
– fdomn-m, Commented Jul 20, 2021 at 9:32
I tested with a snippet (then deleted as duplicate question) - also works fine here: 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. — fdomn-m
– fdomn-m, Commented Jul 20, 2021 at 9:55
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()... — fdomn-m
– fdomn-m, Commented Jul 20, 2021 at 9:57

Kavitha K T · Accepted Answer · 2021-07-22 09:31:30Z

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")

edited Jul 22, 2021 at 9:31

answered Jul 20, 2021 at 9:50

Kavitha K T

1198 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

fdomn-m Over a year ago

Please don't answer questions that have an already-provided duplicate with a code only answer that's the same code as the duplicate.

Kavitha K T Over a year ago

Extremely sorry for that. I didn't notice that

ikiK Over a year ago

Also while code only answers may solve the issue the are not welcomed on SO, add some description so that future readers and OP can learn from it.

Kavitha K T Over a year ago

Sure I will do like that. Thank you

Collectives™ on Stack Overflow

JQuery and checkbox change

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related