How to check the Radio Button in Cypress. The regular check() is not working - reactjs

Question

I bumped into a problem with Cypress. I just couldn't check the radio button.
I have 7 questions with Yes or No radio buttons. By default, all buttons are checked to "NO". I need to check the "YES" options, it will send an API call to the backend and continue to do magic.
The html code for YES looks like this:
<input type="radio" id="options[0]radiovalue-true" class="form-control is-action-field form-check-input" value="true" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
The html code for NO looks like this:
<input type="radio" id="options[0]radiovalue-false" class="form-control is-action-field form-check-input" value="false" checked="" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
By default the NO radio button has property: checked: true , the YES radio button has property: checked: false
This is my tries:
cy.get('[class="sc-fzoJMP"]')
.find('.list-group-item')
.then((item) => {
cy.wrap(item)
.eq(0)
.should('contain', 'Is this opportunity?')
.find('input[type="radio"]')
.then((radioButtons) => {
cy.wrap(radioButtons).eq(0).check({ force: true }).should('be.checked');
});
I used different locators, tried ('[type="radio"]'), (':radio'), ('#options[0]radiovalue-true') I used different check methods: cy.get(':radio').click({force: true}) , cy.get(':radio').check('true', {force: true}) and tried to move code with checking radio buttons out of the loop but this is something else. It doesn't check the radio button but can verify that it's not checked.
I found one solution to use invoke property:
cy.wrap(radioButtons).eq(0).invoke('prop', 'checked', true).should('be.checked');
cy.wrap(radioButtons).eq(1).invoke('prop', 'checked', false).should('not.be.checked');
But it's checking "YES" radio button but it's not unchecking "NO" radio button and it doesn't send API call to the backend as supposed to do.
This is full HTML code for YES and NO radio buttons:
<div class="d-flex ">
<div class="mr-4" style="position: relative;">
<div class="form-check">
<input type="radio" id="options[0]radiovalue-true" class="form-control is-action-field form-check-input" value="true" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
<label for="options[0]radiovalue-true" class="ml-0 form-check__radio form-check-label">
<svg viewBox="0 0 24 24" style="height: 20px; min-height: 20px; width: 20px; min-width: 20px; opacity: 1;">
<title>Select Option</title>
<circle cx="12" cy="12" r="9" stroke="#666666" stroke-width="2" fill="white"></circle>
</svg>
<p class="sc-fznyAO hdDwJr ml-1 typography-body ">Yes</p>
</label>
</div>
</div>
<div class="mr-4" style="position: relative;">
<div class="form-check">
<input type="radio" id="options[0]radiovalue-false" class="form-control is-action-field form-check-input" value="false" checked="" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
<label for="options[0]radiovalue-false" class="ml-0 form-check__radio form-check-label">
<svg viewBox="0 0 24 24" style="height: 20px; min-height: 20px; width: 20px; min-width: 20px; opacity: 1;">
<title>Selected Option</title>
<circle cx="12" cy="12" r="9" stroke="var(--dcp-color-primary)" stroke-width="2" fill="none"></circle>
<circle cx="12" cy="12" r="5" fill="var(--dcp-color-primary)"></circle>
</svg>
<p class="sc-fznyAO hdDwJr ml-1 typography-body ">No</p>
</label>
</div>
<div class="action-field-wrapper is-action-field"></div>
</div>
</div>

Answer 1

The id's that have been assigned contain characters that don't work with # notation, but you can use attribute notation
cy.get('.list-group-item')
.eq(0)
.find('[id="options[0]radiovalue-true"]') // query id as an attribute
.click()
cy.get('.list-group-item')
.eq(0)
.find('[id="options[0]radiovalue-false"]')
.click()
Specifically, the [] in the ids stops '#options[0]radiovalue-true' from working.
With the expanded fragment, this works
cy.get('input[id="options[0]radiovalue-true"]')
.click({force:true})
.should('be.checked')
You need force:true because of the style opacity:0 and width & height 0.
This means the input is effectively hidden, and there is probably a better way to test this - perhaps clicking on the SVG icons.

Answer 2

You can use the IDs and click to select the 'Yes' or 'No' radio buttons.
cy.get('.list-group-item')
.eq(0)
.find('#options[0]radiovalue-true')
.click() //Clicks Yes
cy.get('.list-group-item')
.eq(0)
.find('#options[0]radiovalue-false')
.click() //Clicks No