在javascript中为未选中的复选框设置值null

时间:2017-06-13 07:12:34

标签: javascript jquery checkbox

  

这是JavaScript代码:

var clinicalStat;
var id;
var val;
var clinicalVals;

$(":checkbox").click(function() {
  //alert(" you checked");
   if ($(this).is(':checked')) {
   var checked1 = $(this).val(); //Inital value of checkbox is '0'
   alert("The inital value for selected checkbox = " + checked1);
   var checkedVal = $(this).val('1'); //value is change to '1'
   alert("The value after checked the checkbox is = " + $(this).val());
      }
    });

$(":checkbox").click(function() {
  clinicalStat = document.getElementById('clinicalStat').value;        //clinicalStat(type='textbox') inital value is '0'
  alert("The initial value of clinicalStat = " + clinicalStat);
 clinicalStat = document.getElementById('clinicalStat').value = "1"; //now clinicalStat value is '1'
 alert("Later the value is changed to = " + clinicalStat);
  id = (this.id);
alert("id = " + id);
 val = (this.value);
alert("val = " + val);
clinicalVals = clinicalStat + "^" + id + ":" + val;
alert("clinicalVals  = " + clinicalVals);

});
  

这是我的Checkbox代码。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="col-md-2   right2 fon">
    <h6>Clinical Practice/Procedure</h6>
      <hr>
         <p><input type="hidden" id="incidentClassifId" name="incidentClassifId" value="0"></p>
         <p><input type="hidden" id="incidentViewIndex" name="incidentViewIndex" value="0"></p>
         <p><input type="hidden" id="appendStockistStatus" value="0"></p>
         <p><input type="hidden" name="clinicalStat" id="clinicalStat" value="0"></p>
         <p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalDoc" value="0">Documentation</p>
         <p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMiss" value="0">Missing Files</p>
         <p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalPol" value="0"> Policy not available</p>
         <p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMed" value="0"> Medical records unavailable</p>
         <p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalCon" value="0"> Confidentiality</p>
         <p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalProc" value="0">Procedures not followed</p>
         <p><input type="hidden" name="clinicalVals" id="clinicalVals"></p>
         <p><input type="checkbox" id="checkBox" onclick="EnableDisableTextBox(this)"> Other (Specify)</p>
        <p><input type="text2" id="text" name="incidentClassClinicalVal" disabled="disabled" style="width: 92%"></p>
  </div>
  

如果我检查了文档复选框,我得到的ClinicalVal值就像这个clinicalVals = 1 ^ clinicalDoc:1   我的问题是如何获得临床值如此临床值= 1 ^ clinicalDoc:1 ^ 1 ^ 0:0 ^ 1 ^ 0:0 ^ 1 ^ 0:0 ^ 1 ^ 0:0 ^ 1 ^ 0:0即clinicalDoc选中的复选框未选中。   如果我选择两个复选框,则clinicalVal必须显示如下clinicalVals = 1 ^ clinicalDoc:1 ^ 1 ^ clinicalMiss:1 ^ 1 ^ 0:0 ^ 1 ^ 0:0 ^ 1 ^ 0:0 ^ 1 ^ 0:0即选择了两个复选框,其余未选中

1 个答案:

答案 0 :(得分:0)

循环显示所有复选框并选中是否选中复选框

&#13;
&#13;
var clinicalStat;
var id;
var val;
var clinicalVals ='';

$(":checkbox").click(function() {
  //alert(" you checked");
   if ($(this).is(':checked')) {
   var checked1 = $(this).val(); //Inital value of checkbox is '0'
   
   var checkedVal = $(this).val('1'); //value is change to '1'
  
      }
    });

$(":checkbox").click(function() {
clinicalVals = '';
  clinicalStat = document.getElementById('clinicalStat').value;        //clinicalStat(type='textbox') inital value is '0'
  
 clinicalStat = document.getElementById('clinicalStat').value = "1"; //now clinicalStat value is '1'

var checkboxes = document.getElementsByClassName('clinicalCheck');

for(var i =0; i< checkboxes.length; i++){
  
 id = checkboxes[i].id;
 val = checkboxes[i].value;
 if(checkboxes[i].checked){
  clinicalVals += clinicalStat + "^" + id + ":" + val+"^";
 }else{
  clinicalVals += 1 + "^0:" + val+"^";
 }
 
}
console.log(clinicalVals);

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="col-md-2   right2 fon">
    <h6>Clinical Practice/Procedure</h6>
      <hr>
         <p><input type="hidden" id="incidentClassifId" name="incidentClassifId" value="0"></p>
         <p><input type="hidden" id="incidentViewIndex" name="incidentViewIndex" value="0"></p>
         <p><input type="hidden" id="appendStockistStatus" value="0"></p>
         <p><input type="hidden" name="clinicalStat" id="clinicalStat" value="0"></p>
         <p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalDoc" value="0">Documentation</p>
         <p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMiss" value="0">Missing Files</p>
         <p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalPol" value="0"> Policy not available</p>
         <p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalMed" value="0"> Medical records unavailable</p>
         <p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalCon" value="0"> Confidentiality</p>
         <p><input type="checkbox" name="clinicalDoc" class="clinicalCheck" id="clinicalProc" value="0">Procedures not followed</p>
         <p><input type="hidden" name="clinicalVals" id="clinicalVals"></p>
         <p><input type="checkbox" id="checkBox" onclick="EnableDisableTextBox(this)"> Other (Specify)</p>
        <p><input type="text2" id="text" name="incidentClassClinicalVal" disabled="disabled" style="width: 92%"></p>
  </div>
&#13;
&#13;
&#13;