How to know the value of a live radio button with javascript-CodePudding

I'm trying to retrieve the value of a radio button without validation or button.

When the user changes the radio button I want to retrieve the live value.

I have already tried a lot of code but none worked.

var az = document.querySelector("input[name='promotioncases']").checked = true;
console.log(az);

var selectedValue = $("input.promotioncases:checked").val();
console.log(selectedValue);

var selectedRadioValue = $("input.promotioncases:checked").attr("radio-value");
console.log(selectedRadioValue);

const promotion = document.getElementsByName('promotioncases')
for (e of promotion) {
  if (e.checked)
    console.log(`Elément ${e.id} coché`)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input
  type="radio"
  name="promotioncases"
  
  id="black"
  data-target="10"
  data-nom="POSTE-ENVELLOPPE-belgique"
  value="10" />
  
<input
  type="radio"
  name="promotioncases"
  
  id="red"
  data-target="20"
  data-nom="POSTE-ENVELLOPPE-belgique"
  value="20" />

<input
  type="radio"
  name="promotioncases"
  
  id="vert"
  data-target="30"
  data-nom="POSTE-ENVELLOPPE-belgique"
  value="30" />

CodePudding user response：

$('input[name="promotioncases"]').on('click', function() {
    console.log($(this).attr('data-target'))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input
  type="radio"
  name="promotioncases"
  
  id="black"
  data-target="10"
  data-nom="POSTE-ENVELLOPPE-belgique"
  value="10" />
  
<input
  type="radio"
  name="promotioncases"
  
  id="red"
  data-target="20"
  data-nom="POSTE-ENVELLOPPE-belgique"
  value="20" />

<input
  type="radio"
  name="promotioncases"
  
  id="vert"
  data-target="30"
  data-nom="POSTE-ENVELLOPPE-belgique"
  value="30" />