Alert when checkbox is checked in Javascript / Jquery automatically

Question

Trying to alert the id of the radio button which is checked. But it is not alerting.

// Reference the form - see HTMLFormControlsCollection
var chxGrp = document.forms.checkGroup;

chxGrp.addEventListener('change', message);

/* The Event Object is passed through, you might've seen it as 
|| "e" or "evt". How it's labelled doesn't matter because Event
|| Object is always available when you deal with the DOM.
*/
function message(event) {

  // if the node clicked is a checkbox see if it's...
  if (event.target.type === 'checkbox') {

    // ... checked then...
    if (event.target.checked) {

      wrong_id = event.target.attr('id');
      alert(wrong_id);
    } else {}
  }
  return false;
}

<form id='checkGroup'>

  Question 1
  <div class="question_container">
    <div class="question_div1">
      <div class="question_div2">
        <p>Some persons can do piece of work in 12 days. Twice the number of such persons will do half of that work in, how many days.</p>

        <p>&nbsp;</p>
        <input type="hidden" name="qid1" value="244">
        <div class="option_div">
          <input type="radio" name="radio1" id="checka1" value="A">
          <label for="checka1">
            <p>1</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkb1" value="B">
          <label for="checkb1">
            <p>2</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkc1" value="C">
          <label for="checkc1">
            <p>3</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkd1" value="D">
          <label for="checkd1">
            <p>4</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checke1" value="E">
          <label for="checke1">
            <p>None of these</p>
          </label>
        </div>
      </div>
    </div>
  </div>

  Question 2
  <div class="question_container">
    <div class="question_div1">
      <div class="question_div2">
        <p>In a dairy farm, 40 cows eat 40 bags of husk in 40 days. In how many days one cow will eat one bag of husk.</p>
        <input type="hidden" name="qid2" value="245">
        <div class="option_div">
          <input type="radio" name="radio2" id="checka2" value="A">
          <label for="checka2">
            <p>&nbsp;44</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checkb2" value="B">
          <label for="checkb2">
            <p>45</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checkc2" value="C">
          <label for="checkc2">
            <p>48</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checkd2" value="D">
          <label for="checkd2">
            <p>40</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checke2" value="E">
          <label for="checke2">
            <p>None of these</p>
          </label>
        </div>
      </div>
    </div>
  </div>
</form>

Trying to alert the id of the radio button which is checked. But it is not alerting.

Trying to alert the id of the radio button which is checked. But it is not alerting.

Trying to alert the id of the radio button which is checked. But it is not alerting.

Answer 1

You have 2 mistakes in your code: You check for target.type==="checkbox" while you should check for target.type=="radio" and you have to use getAttribute() instead of attr():

// Reference the form - see HTMLFormControlsCollection
var chxGrp = document.forms.checkGroup;

chxGrp.addEventListener('change', message);

function message(event) {

  // if the node clicked is a checkbox see if it's...
  if (event.target.type === 'radio') {

    // ... checked then...
    if (event.target.checked) {

      wrong_id = event.target.getAttribute('id');
      alert(wrong_id);
    } else {}
  }
  return false;
}

<form id='checkGroup'>

  Question 1
  <div class="question_container">
    <div class="question_div1">
      <div class="question_div2">
        <p>Some persons can do piece of work in 12 days. Twice the number of such persons will do half of that work in, how many days.</p>

        <p>&nbsp;</p>
        <input type="hidden" name="qid1" value="244">
        <div class="option_div">
          <input type="radio" name="radio1" id="checka1" value="A">
          <label for="checka1">
            <p>1</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkb1" value="B">
          <label for="checkb1">
            <p>2</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkc1" value="C">
          <label for="checkc1">
            <p>3</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkd1" value="D">
          <label for="checkd1">
            <p>4</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checke1" value="E">
          <label for="checke1">
            <p>None of these</p>
          </label>
        </div>
      </div>
    </div>
  </div>

  Question 2
  <div class="question_container">
    <div class="question_div1">
      <div class="question_div2">
        <p>In a dairy farm, 40 cows eat 40 bags of husk in 40 days. In how many days one cow will eat one bag of husk.</p>
        <input type="hidden" name="qid2" value="245">
        <div class="option_div">
          <input type="radio" name="radio2" id="checka2" value="A">
          <label for="checka2">
            <p>&nbsp;44</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checkb2" value="B">
          <label for="checkb2">
            <p>45</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checkc2" value="C">
          <label for="checkc2">
            <p>48</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checkd2" value="D">
          <label for="checkd2">
            <p>40</p>
          </label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checke2" value="E">
          <label for="checke2">
            <p>None of these</p>
          </label>
        </div>
      </div>
    </div>
  </div>
</form>

You could use jQuery's attr() function if you cast event.target before: $(event.target).attr("id"), but as your complete code is in javascript, there's no need to use jQuery here.