所以我在一个范围内有一个单选按钮列表,当按下编码时,我想使用JavaScript将这些单选按钮的值打印到文本区域(id:BINARYBit),使用函数bin2dec。如果选择了无线电,我需要这些值为1,如果不是,则需要0。我在下面添加了一个显示整个文档的片段。 有什么想法吗 ? 谢谢!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
</head>
<body>
<div class="container">
<div class="col-lg-8">
<label for="HEXBit">Input the Bitmask Here</label>
<br/>
<input type="text" class="form-control" id="DECBit" />
<br/>
<input type="submit" class="btn btn-primary btn-sm" id="Submit" value="Decode" onclick="dec2bin();" />
<br/>
<input type="text" class="form-control" id="BINARYBit" disabled="disabled" />
<br/>
<input type="submit" class="btn btn-primary btn-sm" id="SubmitCon" value="Encode" onclick="bin2dec();" />
<br/>
<span id="radiocheck">
<br/>
<input type="radio" id="BinaryMessage" />
<label for="BinaryMessage">Send Binary Message</label>
<br/>
<input type="radio" id="Param1" />
<label for="Param1">Param1</label>
<br/>
<input type="radio" id="MDMID" />
<label for="MDMID">Modem ID </label>
<br/>
<input type="radio" id="GPIO" />
<label for="GPIO">GPIO</label>
<br/>
<input type="radio" id="AnalogDigi1" />
<label for="AnalogDigi1">Digital/Analog 1</label>
<br/>
<input type="radio" id="AnalogDigi2" />
<label for="AnalogDigi2">Digital/Analog 2</label>
<br/>
<input type="radio" id="StoreMsg" />
<label for="StoreMsg">Save Message if no GPRS</label>
<br/>
<input type="radio" id="InputNum" />
<label for="InputNum">Input Event Number</label>
<br/>
<input type="radio" id="GPSDate" />
<label for="GPSDate">GPS Date</label>
<br/>
<input type="radio" id="GPSStatus" />
<label for="GPSStatus">GPS Status</label>
<br/>
<input type="radio" id="GPSLat" />
<label for="GPSLat">Latitude</label>
<br/>
<input type="radio" id="GPSLong" />
<label for="GPSLong">Longitude</label>
<br/>
<input type="radio" id="GPSSpeed" />
<label for="GPSSpeed">GPS Speed (Knots)</label>
<br/>
<input type="radio" id="GPSHeading" />
<label for="GPSHeading">Heading</label>
<br/>
<input type="radio" id="GPSTime" />
<label for="GPSTime">GPS Time</label>
<br/>
<input type="radio" id="GPSAlt" />
<label for="GPSAlt">Altitude</label>
<br/>
<input type="radio" id="GPSNoSAT" />
<label for="GPSNoSAT">Number of GPS Satelites</label>
<br/>
<input type="radio" id="LowPowerMsg" />
<label for="LowPowerMsg">Stop Messages In Low Power</label>
<br/>
<input type="radio" id="SMSNoGPRS" />
<label for="SMSNoGPRS">Send SMS When No GPRS</label>
<br/>
<input type="radio" id="LastKnownGPS" />
<label for="LastKnownGPS">Use Last Known GPS When Unavaliable</label>
<br/>
<input type="radio" id="GPSOdo" />
<label for="GPSOdo">Odometer</label>
<br/>
<input type="radio" id="RTCTime" />
<label for="RTCTime">RTC Time</label>
<br/>
<input type="radio" id="ShortID" />
<label for="ShortID">Use Short Modem ID</label>
<br/>
<input type="radio" id="BattLVL" />
<label for="BattLVL">Power Level</label>
<br/>
<input type="radio" id="GPSOverSpeed" />
<label for="GPSOverSpeed">GPS Overspeed Data</label>
<br/>
<input type="radio" value="1" id="PCELL" />
<label for="PCELL">PCELL Data</label>
<br/>
<input type="radio" id="GPSALTOvr" />
<label for="GPSALTOvr">GPS Alternative Over Speed</label>
</span>
</div>
</div>
</body>
<script language="JavaScript">
function dec2bin() {
var dec = document.getElementById("DECBit").value
var val = (dec >>> 0).toString(2);
var pad = "00000000000000000000000000000000";
var answer = pad.substring(0, pad.length - val.length) + val;
var arr = [];
for (var i = 0; i < answer.length; i++) {
arr[i] = (answer.charAt(i) == "1" ? true : false);
}
arr.reverse();
console.log(answer);
console.log(arr);
document.getElementById("BINARYBit").value = answer;
var span = document.getElementById("radiocheck");
var inputs = span.getElementsByTagName("input");
for (var i = 0; i < arr.length; ++i) {
var thing = inputs[i];
thing.checked = arr[i];
}
function bin2dec() {
}
}
</script>
</html>
答案 0 :(得分:1)
使用原生javascript,最好的方法是提供您要检查类<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="8%" class="left-stripes"></td>
<td width="92%" class="right-invoice">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" class="billed-to-info">
Billed To,
<h3>Party Name</h3>
Party Detailed Address <br>
0124-234564 <br>
</td>
<td width="50%" align="right"><img src="<?php echo base_url(); ?>assets/img/tophead.jpg" class="topHeaderImageRight" /></td>
</tr>
<tr>
<td class="order-info" valign="top" style="padding-top: 20px;padding-left:10px;">
Order ID: #602 <br />
Delivery Date: 25 April 2016
</td>
<td class="billed-to-info" style="padding-top: 20px;">
<span>Billed By,</span>
<h3>Party Name</h3>
Party Address Details <br>
0712-277 4770 <br>
</td>
</tr>
</table>
<br />
<table width="100%" cellpadding="0" cellspacing="0" class="product-list-table">
<tr style="background-color: #F5F5F5 !important;">
<th class="productinfo-header text-center"></th>
<th class="productinfo-header text-left">Item</th>
<th class="productinfo-header text-center">Mfg. Date</th>
<th class="productinfo-header text-center">Expiry Date</th>
<th class="productinfo-header text-right">QTY</th>
<th class="productinfo-header text-right">MRP</th>
<th class="productinfo-header text-right">Rate</th>
<th class="productinfo-header text-right">Total</th>
</tr>
<?php
for ($i=0; $i < 22; $i++) {
?>
<tr>
<td width="5%" class="productinfo-list text-center">1</td>
<td width="28%" class="productinfo-list text-left">Haldi Powder (100 gm)</td>
<td width="15%" class="productinfo-list text-center line-height-21">
01 Feb 16 (10) <br />
01 Mar 16 (30)
</td>
<td width="15%" class="productinfo-list text-center line-height-21">
01 Oct 16(10) <br />
01 Nov 16(30)
</td>
<td width="8%" class="productinfo-list text-right">40</td>
<td width="8%" class="productinfo-list text-right">60.00</td>
<td width="8%" class="productinfo-list text-right">55.23</td>
<td width="13%" class="productinfo-list text-right">5246.00</td>
</tr>
<tr>
<td class="productinfo-list text-center">12</td>
<td class="productinfo-list text-left">Haldi Powder (200 gm)</td>
<td class="productinfo-list text-center">01 Feb 16</td>
<td class="productinfo-list text-center">01 Oct 16</td>
<td class="productinfo-list text-right">10</td>
<td class="productinfo-list text-right">110.00</td>
<td class="productinfo-list text-right">90.23</td>
<td class="productinfo-list text-right">902.30</td>
</tr>
<?php } ?>
<tr>
<td colspan="4" rowspan="4" class="productinfo-list line-height-21">
<span>Buyer's VAT: 1234566</span><br />
<span>Seller's VAT: 326541233</span><br />
<span>Account Number: 12354647</span><br />
<span>IFSC Code: BFGH1234</span>
</td>
<td colspan="3" class="productinfo-list">Gross Total</td>
<td class="productinfo-list text-right">6100.23</td>
</tr>
<tr>
<td colspan="3" class="productinfo-list">Scheme Discount</td>
<td class="productinfo-list text-right">100.23</td>
</tr>
<tr>
<td colspan="3" class="productinfo-list">VAT</td>
<td class="productinfo-list text-right">531.10</td>
</tr>
<tr>
<td colspan="3" class="productinfo-list">Net Total</td>
<td class="productinfo-list text-right">6500.10</td>
</tr>
</table>
<pagebreak />
<br /><br />
</td>
</tr>
</table>
之类的所有输入,然后在函数中搜索所有这些项目,如下所示:
class="item"
HTML示例:
function bin2dec() {
var printableEncoded = "",
items = document.getElementsByClassName("item");
// For each item if it's checked include a '1', else a '0'
for (var i = 0; i < items.length; i++) {
printableEncoded += items[i].checked ? "1" : "0";
}
// Change the value of the disabled input to the encoded string
document.getElementById("BINARYBit").value = printableEncoded;
}
答案 1 :(得分:0)
使用jquery的解决方案
function encode()
{
var value="";
//select all radio buttons
$(".container input[type='radio']").filter(function(i,el){
//check if radio button is checked
value=value + ( ($(el).prop("checked")==true)? "1":"0");
});
$("#BINARYBit").val(value);
}
refereces: