设置值在JavaScript空，未被选定的复选框

Question

这是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); 

}); 

这是我的复选框代码。

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

如果我检查文档复选框IAM越来越ClinicalVal值这样clinicalVals = 1^clinicalDoc：1 我的问题是什么如何得到这样clinicalVals = 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选择即两个复选框剩余未选择

Answer 1

循环所有的复选框的和检查复选框被选中或不

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

 
});

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