Handling the html text with checkbox selection

JavaScript
1

I have a scenario where selecting a checkbox for Testing sample switches the radio button to option A and unchecking the checked checkbox switches back the radio button to option B as shown in the code snippet below. By default, option B is selected.

My question: When Testing Sample checkbox is checked, in addition to switching the option to A from B (which is already happening in the jsfiddle below), I want to update the text of html as well from A. Some text goes here to the one defined in the variable choiceAHtml. However, I’m little confused here as I’m dealing with the table cell element so how should I select this part of table <td> A. Some text goes here</td> in order to update the text dynamically using jQuery or javascript?

Here’s my JSFiddle

2

Jquery selectors operate on any valid CSS definition for an element.
$("someCSSSelectorHere")

Without seeing all of the HTML in-situ, it’s going to be difficult to give an accurate CSS selector that would find that specific cell. The HTML you’ve got in your example is… malformed? Tables inside tables?

(I suspect you’d do well to let one of the CSS gurus loose on your site and let them give you recommendations…probably along the lines of replacing tables with divs. But that’s beyond the scope of this thread)

The easiest solution would be to give that td an ID, and then reference it like you have the other things with ID’s in your javascript.

3

Is that HTML code from the 1990s?

I’m not a guru but this is roughly how I would do it:
https://codepen.io/Archibald2/pen/azbjoEQ

You need to consider how that would display on small screens such as smartphones, especially as the length of label text changes.

1 Like
4

I believe yes as I had to redo another piece of code and convert everything to divs. Tables are everywhere in my code.

1 Like
5

In your javascript, can we use span id spanA like this? You have already used it and my question may not make sense but just trying to understand it little better. Thanks!

spanA.innerText = choiceA; and spanA.innerText = oldA;

Also, I was wondering if it’s possible to just hide the radio button of choice A when checkbox is selected (so it may look like just a text displaying over there but behind the scenes it’s still a radio button - my backend is handling it based on radio button so I was thinking of keeping it as it is) and completely hide the choice B because I am thinking about a possibility what if user selectes a checkbox, it does what it is doing now and then user accidently selects choice B. In this scenario, my original condition fails where checking Testing Sample checkbox should only select choice A.

6

These are called Named Elements (or i guess, if you want to be technical, “Named access on the window object”). You can reference them this way, but it’s generally discouraged as its considered “brittle code”.

You can hide the radio buttons, sure. You could even just… not have them exist, and your form could check for whether the checkbox was checked or not. (If it was checked, they chose A. If it wasnt, they chose B/used the default)

7

Thanks for explaining. I haven’t seen such usage before and hence I was wondering about that.

Or, I could just disable the choice B when checkbox is selected and choice A is selected and when unchecked, I can enable option B and have option B selected.

9

Please ignore - I figured it

So I ended up defining both the choices of radio button in a separate div and the one line text that I needed to display upon checking checkbox in a separate div(with stying style="display: none"). So I’m hiding and showing divs based on checkbox selection.

However, one issue I see here is when page is refreshed, it defaults to the one with two radio buttons with checkbox checked, maybe because I have style="display: none" for the one line text that I needed to display when checkbox is selected.

Is there anything wrong in my approach?

Here’s how I’m hiding and showing it:

$("[name='testingOptionSpring']").change(function () {
    if ($("[name='testingOptionSpring']").is(":checked")) {
      $(".testingSampleChoice").show();// class of the div containing one line text
	  $(".choices").hide(); // class of the div containing both radio buttons
	  $('#sampleChoice2').prop('checked',false);
	  $('#sampleChoice1').prop('checked',true);

	
    } else {
	  $(".testingSampleChoice").hide();// class of the div containing one line text
	  $(".choices").show();// class of the div containing both radio buttons
		$('#sampleChoice2').prop('checked',true);
		$('#sampleChoice1').prop('checked',false);
    }
  });

There’s a initialize function I saw in my code like this so I placed my above code inside a testingSampleCheck function and defined it like this but it didn’t make any difference

//initialize
	var func = document.body.onload;
	window.onload = function() {
		func();
		testingSampleCheck()
	};

Please ignore - I figured it