自動在 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。 但它並沒有引起警覺。

Answer 1

您的代碼中有 2 個錯誤：您檢查target.type==="checkbox"而應該檢查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() function 如果你之前投射event.target ： $(event.target).attr("id") ，但由於你的完整代碼在 javascript 中，這里沒有必要使用 ZF5990B4FDA2C3C3C3C0BE28DDD