javascript - 在Javascript / Jquery中自动选中复选框时发出警报

Question

试图提醒选中的单选按钮的 id。但它并没有引起警觉。

// 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>

试图提醒选中的单选按钮的 id。但它并没有引起警觉。

试图提醒选中的单选按钮的 id。但它并没有引起警觉。

试图提醒选中的单选按钮的 id。但它并没有引起警觉。

标签： javascripthtmljqueryalertradio

Answer 1

您的代码中有 2 个错误：您检查target.type==="checkbox"while 您应该检查target.type=="radio"并且您必须使用getAttribute()而不是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>

如果你之前转换过，你可以使用 jQuery 的attr()函数event.target: $(event.target).attr("id")，但由于你的完整代码是在 javascript 中，所以这里不需要使用 jQuery。