如何獲取所有選中的複選框文本並存儲在TestShortName中？

Question

如何獲得所有選中的複選框文本並存儲在TestShortName中？例如我需要存儲10個Panel和TCA，如果它們被檢查並存儲在TestShortName變量中。

<div id="cf_2684376_div"> 
     <div style="overflow:hidden"> 
      <label style="display:inline-block;width:33%;float:left;padding:0px" for="cf_2684376_0"> 
       <input type="CheckBox" value="10 Panel (AMP,COC,OPI,PCP,THC,?)" id="cf_2684376_0" name="cf_2684376" checked="" title="" onclick="StoreNames()">10 Panel<input type="hidden" value="Z1h8dUNLU1l5dkFgB1kxR0t@Rn9fcnl3DFNXawMHOAIDBgI~" name="sec_cf_2684376"> 
      </label> 
      <label style="display:inline-block;width:33%;float:left;padding:0px" for="cf_2684376_1"> 
       <input type="CheckBox" value="5 Panel (AMP,COC,OPI,PCP,THC)" id="cf_2684376_1" name="cf_2684376" title="" onclick="StoreNames()">5 Panel<input type="hidden" value="Z1h8dUNLU1l5dkFgB1kxR0t@Rn9fcnl3DFNXawMHOAIDBgI~" name="sec_cf_2684376"> 
      </label> 
      <label style="display:inline-block;width:33%;float:left;padding:0px" for="cf_2684376_2"> 
       <input type="CheckBox" value="7 Panel (AMP,COC,OPI,PCP,THC,?)" id="cf_2684376_2" name="cf_2684376" title="" onclick="StoreNames()" disabled="">7 Panel<input type="hidden" value="Z1h8dUNLU1l5dkFgB1kxR0t@Rn9fcnl3DFNXawMHOAIDBgI~" name="sec_cf_2684376"> 
      </label> 
     </div> 
     <div style="overflow:hidden"> 
      <label style="display:inline-block;width:33%;float:left;padding:0px" for="cf_2684376_3"> 
       <input type="CheckBox" value="Amphetamine" id="cf_2684376_3" name="cf_2684376" title="" onclick="StoreNames()" disabled="">AMP<input type="hidden" value="Z1h8dUNLU1l5dkFgB1kxR0t@Rn9fcnl3DFNXawMHOAIDBgI~" name="sec_cf_2684376"> 
      </label> 
      <label style="display:inline-block;width:33%;float:left;padding:0px" for="cf_2684376_4"> 
       <input type="CheckBox" value="Barbiturate" id="cf_2684376_4" name="cf_2684376" title="" onclick="StoreNames()" disabled="">BAR<input type="hidden" value="Z1h8dUNLU1l5dkFgB1kxR0t@Rn9fcnl3DFNXawMHOAIDBgI~" name="sec_cf_2684376"> 
      </label> 
      <label style="display:inline-block;width:33%;float:left;padding:0px" for="cf_2684376_5"> 
       <input type="CheckBox" value="Breath Alcohol Test" id="cf_2684376_5" name="cf_2684376" title="" onclick="StoreNames()" disabled="">BAT<input type="hidden" value="Z1h8dUNLU1l5dkFgB1kxR0t@Rn9fcnl3DFNXawMHOAIDBgI~" name="sec_cf_2684376"> 
      </label> 
     </div> 
     <div style="overflow:hidden"> 
      <label style="display:inline-block;width:33%;float:left;padding:0px" for="cf_2684376_18"> 
       <input type="CheckBox" value="Phencyclidine" id="cf_2684376_18" name="cf_2684376" title="" onclick="StoreNames()" disabled="">PCP<input type="hidden" value="Z1h8dUNLU1l5dkFgB1kxR0t@Rn9fcnl3DFNXawMHOAIDBgI~" name="sec_cf_2684376"> 
      </label> 
      <label style="display:inline-block;width:33%;float:left;padding:0px" for="cf_2684376_19"> 
       <input type="CheckBox" value="Propoxyphene" id="cf_2684376_19" name="cf_2684376" title="" onclick="StoreNames()" disabled="">PPX<input type="hidden" value="Z1h8dUNLU1l5dkFgB1kxR0t@Rn9fcnl3DFNXawMHOAIDBgI~" name="sec_cf_2684376"> 
      </label> 
      <label style="display:inline-block;width:33%;float:left;padding:0px" for="cf_2684376_20"> 
       <input type="CheckBox" value="Tricyclic antidepressant" id="cf_2684376_20" name="cf_2684376" title="" onclick="StoreNames()" disabled="">TCA<input type="hidden" value="Z1h8dUNLU1l5dkFgB1kxR0t@Rn9fcnl3DFNXawMHOAIDBgI~" name="sec_cf_2684376"> 
      </label> 
     </div> 
    </div> 

我的代碼：

function StoreNames(){ 
var TestShortName = '';  
$(':checkbox[id^=cf_2684376]:checked').each(function(){     
    TestShortName != '' ? TestShortName += $(this).next().text() + ';' : TestShortName = $(this).next().text() + ';';  
});   
$('#cf_2684387').val(TestShortName);  

}

Answer 1

假設你要與輸入相關聯的標籤元素的文本：

function StoreNames() { 
    var shortNames = $('input[type="checkbox"]:checked').map(function(){ 
     return $(this).parent().text(); 
    }).get(), 
     shortNamesString = shortNames.join(', ') + '.'; 

    $('#cf_2684387').val(shortNamesString); 
} 

// call the function with: 
$('input[type="checkbox"]').on('change', StoreNames); 

參考文獻：

• change()。
• get()。
• map()。
• on()。
• text()。