在javascript中存储选中的复选框值

时间:2012-04-13 11:44:34

标签: javascript checkbox

我的每个div包含多个复选框,我有几个div。我想跟踪选中哪个复选框及其各自的div。我试图将它存储在一个多维数组中,但它不合适.. 如果您有任何其他想法,那么请与我分享。

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

                                                            

3 个答案:

答案 0 :(得分:1)

您可以尝试的一件事是将其存储为JSON对象。例如,假设div1,div2和div3各包含2个复选框。然后JSON对象将只包含已选中的复选框,如

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

这个link可以帮助您理解JSON对象。

答案 1 :(得分:0)

<强> DEMO

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

答案 2 :(得分:0)

一种方法是使用JSON存储。它有一个名为checked的事件,它返回一个布尔值。另外,请通过以下链接: http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.Checkbox-event-check