2012-04-13 73 views
-1

我的每个div都包含多个复选框,并且我有这样的几个div。我想保持跟踪选中哪个复选框以及它们各自的div。我试图将它存储在一个多维数组中,但它不适合。 如果您有任何其他想法,然后PLZ与我分享。在javascript中存储已勾选的复选框值

<html> 
<head> 
<style type="text/css" > 
div{ 
width:50%; 
height:500px; 
border:2px solid black; 
} 

</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 

var count = 0; 
function selectradiobutn(frmname){ 
    formfield=document.forms[frmname].first_ques; 
    for(i=0;i<formfield.length;i++){ 
    if(formfield[i].checked==true){ 
    var value1 = formfield[i].value; 
    alert(value1); 
    var value = new Array; 
    value[i]=value1; 
    var myarray = new Array("A. Aluminium","B. Commodities that is    available according  to their demand","C. to remove salts","D. 1970 in Bangkok","D. None of the above"); 
    if(myarray[i]==value[i]){ 
    count++; 
    //alert(count); 
    } 
    } 
    } 
    return count; 
     } 
     function create_array1(){ 
     alert("Your score is"+count); 
     document.getElementById('main').innerHTML = "Your score is"+count; 
     } 


     </script> 
     </head> 
     <body> 
      <div id="main" style="width:50%; height:500px; border:2px solid black;"> 
     <center><p style="padding:70px;"><h1>Click the button to start test</h1></p> 
     <input type="button" value="Start test." id="btn_start"     onclick="show_div('main','first1')"> 
     </div> 
     </center> 

     <div id="first1" style="display:none; "> 

      <p style="padding:50px;">1.  For galvanizing iron which of the following metals is used ? 
     </br> 
      <form name="f1"> 
      <input type=Checkbox name=first_ques value="A. Aluminium"    onclick="selectradiobutn('f1')">A. Aluminium </br></br> 
      <input type=Checkbox name=first_ques value="B. Copper" onclick="selectradiobutn('f1')">B. Copper</br></br> 
      <input type=Checkbox name=first_ques value="C. Lead" onclick="selectradiobutn('f1')">C. Lead</br></br> 
      <input type=Checkbox name=first_ques value="D. Zinc" onclick="selectradiobutn('f1')">D. Zinc</br></p> 
      <center><input type="button" value="Next" onclick="show_div('first1','first2')"></center> 

   <div id="first2" style="display:none;"> 
       <p style="padding:50px;"> 2. Economic goods are </br> 
      <form name=f2> 
        <input type="Checkbox" name=first_ques value="first" onclick="selectradiobutn('f2')">A. all commodities that are limited in quantity as compared to their demand</br></br> 
       <input type="Checkbox" name=first_ques value="B. Commodities that is available according to their demand" onclick="selectradiobutn('f2')">B. Commodities that is available according to their demand</br></br> 
      <input type="Checkbox" name=first_ques value="C. Commodities that is available more as compared to demand" onclick="selectradiobutn('f2')">C. Commodities that is available more as compared to demand</br></br> 
       <input type="Checkbox" name=first_ques value="D. None of the above" onclick="selectradiobutn('f2')">D. None of the above</br></br></p> 
       <center><input type="button" value="Next" onclick="show_div('first2','first3')"></center> 

 <div id="first3" style="display:none;"> 
     <p style="padding:50px;">3. For purifying drinking water alum is used 
      <form name="f3"> 
       <input type="Checkbox" value="A. for coagulation of mud particles" name=first_ques onclick="selectradiobutn('f3')">A. for coagulation of mud particles</br>     </br> 
     <input type="Checkbox" value="B. to kill bacteria" name=first_ques onclick="selectradiobutn('f3')">B. to kill bacteria</br></br> 
     <input type="Checkbox" value="C. to remove salts" name=first_ques onclick="selectradiobutn('f3')">C. to remove salts</br></br> 
     <input type="Checkbox" value="D. to remove gases" name=first_ques onclick="selectradiobutn('f3')">D. to remove gases</br></br></p> 
      <center><input type="button" value="Next" onclick="show_div('first3','first4')"></center> 
       </form> 
       </div> 



     <div id="first4" style="display:none;">  
      <p style="padding:50px;">4. Hockey was introduced in the Asian Games in 
      <form name="f4"> 
      <input type="Checkbox" value="A.  1958 in Tokyo" name=first_ques value="first_forth" onclick="selectradiobutn('f4')">A. 1958 in Tokyo</br></br> 
      <input type="Checkbox" value="B.  1962 in Jakarta" name=first_ques onclick="selectradiobutn('f4')">B. 1962 in Jakarta</br></br> 
      <input type="Checkbox" value="B. 1962 in Jakarta" name=first_ques onclick="selectradiobutn('f4')">B. 1962 in Jakarta</br></br> 
      <input type="Checkbox" value="D. 1970 in Bangkok" name=first_ques onclick="selectradiobutn('f4')">D.  1970 in Bangkok</br></br></p> 
     <center><input type="button" value="Next" onclick="show_div('first4','first5')"></center> 

     </form> 
      </div> 



      <div id="first5" style="display:none;"> 
       <p style="padding:50px;">5.ESCAP stands for 
       <form name="f5"> 
        <input type="Checkbox" value="A. Economic and Social Commission for Asia and Pacific" name=first_ques onclick="selectradiobutn('f5')">A.  Economic and Social Commission for Asia and Pacific</br></br> 
       <input type="Checkbox" value="B. European Society Council for Africa and Pacific" name=first_ques onclick="selectradiobutn('f5')">B.  European Society Council for Africa and Pacific</br></br> 
       <input type="Checkbox" value="C. Economic and Social Commission for Africa and Pacific" name=first_ques onclick="selectradiobutn('f5')">C. Economic and Social Commission for Africa and Pacific</br></br> 
       <input type="Checkbox" value="D. None of the above" name=first_ques onclick="selectradiobutn('f5')">D. None of the above</br></br></p> 

+2

你可以发布你的代码吗? – nandu 2012-04-13 11:47:34

+0

请你详细说明一下吗?向我们展示您的html并通过“跟踪选定的复选框”来描述您想实现的目标。为什么你必须存储它们 - 例如,是不是在DOM中查看它们是足够的? – 2012-04-13 11:48:26

+0

您是否希望存储复选框的ID以及它在选中时的div(真) – 2012-04-13 11:48:45

回答

1

一件事笏你可以尝试为t将其存储为JSON对象。例如,说div1,div2和div3每个包含2个复选框。然后JSON对象将只包含选中的复选框,如

var jsonObject = [{ "divName" : "div1", "selectedCheckBoxes" : [{"checkbox1"}] }, [{ "divName" : "div2", "selectedCheckBoxes" : [{"checkbox2"}] }]等等。

这个link会帮助你理解JSON对象。

+0

我没有更多关于json的想法我应该创建不同的json文件 – Pranali 2012-04-13 12:21:50

+0

一些简单的例子在此链接中给出 - http://stackoverflow.com/questions/920930 /如何到创建JSON的逐JavaScript的for循环。希望这可以帮助。 – Krishna 2012-04-13 12:38:10

0

DEMO

$(function() { 
      $('#myButton').click(function() { 
       $('input:checkbox:checked').each(function(i) { 
        alert(this.value); 
        var id= $(this).parent().attr('id') 
        alert(id); 
      }); 
     }); 
});