2017-06-18 65 views
0

我正在嘗試進行MCQ測驗問題,其中每個問題都帶有4個選項。我想爲每個問題提供單獨的重置按鈕。當我點擊重置按鈕重置或取消選中所有單選按鈕。如何重置相同組或名稱的單選按鈕?如何重置或取消選中具有相同名稱的單選按鈕

<div class="col-lg-10 col-md-10 col-sm-9"> 
         <div class="lms_service_detail"> 
          <h3>An object is represented by two attributes, out of which one is characteristics and the other one is ___________.</h3> 
          <p><input name="1" id="Radio1" type="radio" value="A" /> Behaviour</p> 
          <p><input name="1" id="Radio2" type="radio" value="B" /> Situation</p> 
          <p><input name="1" id="Radio3" type="radio" value="C" /> Abstraction</p> 
          <p><input name="1" id="Radio4" type="radio" value="D" /> Encapsulation</p> 
          <p><input id="Submit1" type="submit" value="Reset" /></p> 
         </div> 
        </div> 
        <div class="col-lg-10 col-md-10 col-sm-9"> 
         <div class="lms_service_detail"> 
          <h3>Name the programming technique that implements programs as an organized collection of interactive objects.</h3> 
          <p><input name="2" id="Radio5" type="radio" value="A" /> Procedural Programming</p> 
          <p><input name="2" id="Radio6" type="radio" value="B" /> Modular Programming</p> 
          <p><input name="2" id="Radio7" type="radio" value="C" /> Object-Oriented Programming</p> 
          <p><input name="2" id="Radio8" type="radio" value="D" /> None of these</p> 
          <p><input id="Submit2" type="submit" value="Reset" /></p> 
         </div> 
       </div> 

回答

0
function onResetClick() { 
    var $firstQuestion = document.querySelectorAll('input[name=1]'); 
    var $secondQuestion = document.querySelectorAll('input[name=2]'); 

    for (var i = 0; i < $firstQuestion.length; i++) { 
     var $el = $firstQuestion; 
     $el.setAttribute('checked', false); 
    } 

    for (i = 0; i < $secondQuestion.length; i++) { 
     $el = $secondQuestion; 
     $el.setAttribute('checked', false); 
    } 
} 

綁定onResetClick方法將首先獲得所有對應問題的投入。然後,我們迭代元素並檢查setAttribute爲false。不需要jQuery。

0

在jQuery中您可以使用:

$('input[name=Choose]').attr('checked',false); //for a specific radio button 

OR 

$('input').attr('checked',false); //for all radio buttons 

而且在JavaScript:

var ele = document.getElementsByName("Choose"); 
ele.checked = false; //for specific element 

OR 

var inputs = document.getElementsByTagName('input'); 
for(var i=0;i<inputs .length;i++) 
    inputs [i].checked = false; //for all radio buttons 
相關問題