Store checked checkbox value in javascript

Question

MY each div contain multiple checkbox and I have such several div . iwant to keep a track of which checkbox selected and their respective div . I am trying to store it inside a multidimensional array but it's not proper .. If you have any other idea then plz share with me.

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

could you please elaborate more? Show us your html and describe what you want to achieve by "keeping track of selected checkboxes". Why do you have to store them - isn't looking at them in the DOM sufficient, for instance? — Niklas Wulff, Apr 13 '12 at 11:48
Are you looking to store the ID of the checkbox and the div it is in when it is checked (true) — Mark Walters, Apr 13 '12 at 11:48
yes mark i want to store value of that checked checkbox and the div but i am not able to do it by using multidimensional array I have 4 div and each div content 1 question and foru checkbox — Pranali, Apr 13 '12 at 12:21

score 1 · Answer 1 · answered Apr 13 '12 at 11:54

1

One thing wat you could try is to store it as a JSON object. For example, say div1, div2 and div3 contains 2 checkboxes each. Then the JSON object would contain only the checked checkboxes like

var jsonObject = [{ "divName" : "div1", "selectedCheckBoxes" : [{"checkbox1"}] }, [{ "divName" : "div2", "selectedCheckBoxes" : [{"checkbox2"}] }] so on.

This link would help you in understanding JSON objects.

answered Apr 13 '12 at 11:54

Krishna

636
3
8

I don't have much more idea about json shall i create different json file – Pranali Apr 13 '12 at 12:21
Some simple examples are given in this link - http://stackoverflow.com/questions/920930/how-to-create-json-by-javascript-for-loop. Hope this helps. – Krishna Apr 13 '12 at 12:38

score 0 · Answer 2 · answered Apr 13 '12 at 11:57

DEMO:

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

score 0 · Answer 3 · answered May 15 '12 at 15:14

0

One way to do is to make use of JSON stores. It has an event known as checked, which returns a boolean value. Also, please go through the following link: http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.Checkbox-event-check

answered May 15 '12 at 15:14

rosebrit3

523
1
18
32

Store checked checkbox value in javascript

3 Answers3