如何使用 Javascript 通过其值和名称属性访问输入字段的值

Question

I'd like to select an input: <input id="tb-radio-gym_custom_radio-10ce67e3" type="radio" value="OUI" name="form_fields[gym_custom_radio]" data-price-inc="0" checked="checked">

I'd like to select it, by his name and value. The id is random so i can't select like this.

I don't know how to select it with: value="OUI" and name="form_fields[gym_custom_radio]"

When i can select this input, i'd like to hide it then. It can be JS or Jquery, i tried but i can't do it, so thank you for your help !!

Answer 1

Use an Attribute Selector with multiple attributes.

const radioButton = document.querySelector(
    'input[name="form_fields[gym_custom_radio]"][value="OUI"]')

Make sure you quote the values so you don't run into trouble with the square-brackets in the name .

You can use the same selector string with jQuery.

Demo...

 const radioButton = document.querySelector( 'input[name="form_fields[gym_custom_radio]"][value="OUI"]') radioButton.classList.add('active') console.log('OUI data-price-inc:', radioButton.dataset.priceInc)

 .active { box-shadow: 0px 0px 5px 2px red; }

 <input id="tb-radio-gym_custom_radio-10ce67e3" type="radio" value="OUI" name="form_fields[gym_custom_radio]" data-price-inc="0" checked="checked"> <input id="tb-radio-gym_custom_radio-7r7r09r" type="radio" value="NON" name="form_fields[gym_custom_radio]" data-price-inc="1">