【问题标题】:Store checked checkbox value in javascript在javascript中存储选中的复选框值
【发布时间】:2012-05-15 23:14:45
【问题描述】:

我的每个 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>

【问题讨论】:

  • 你能贴出你的代码吗?
  • 您能详细说明一下吗?向我们展示您的 html 并通过“跟踪选定的复选框”来描述您想要实现的目标。为什么必须存储它们 - 例如,在 DOM 中查看它们还不够吗?
  • 您是否要存储复选框的 ID 和选中时所在的 div (true)
  • 是的标记我想存储该选中复选框和 div 的值,但我无法通过使用多维数组来做到这一点我有 4 个 div,每个 div 内容 1 个问题和论坛复选框

标签: javascript checkbox


【解决方案1】:

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

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

link 将帮助您理解 JSON 对象。

【讨论】:

【解决方案2】:

DEMO

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

【讨论】:

    【解决方案3】:

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

    【讨论】:

      猜你喜欢
      • 2015-02-22
      • 1970-01-01
      • 2014-03-31
      • 2018-02-06
      • 2018-09-03
      • 2015-09-01
      • 2018-12-18
      • 1970-01-01
      • 2016-02-20
      相关资源
      最近更新 更多