我有以下html有一个form.Based值“ccType”即if（ccType =='maestro'） id =“cvv”的字段，即cvv字段及其标签应该是隐藏的。我是javascript的新手，我不知道如何使这个工作。
<body>
<div id="credit-card">
<header>
<span class="title" style="background-image: url('images/fethrpowered.png')"><strong>This is a secure 128-bit SSL Encrypted payment.You're safe !</strong></span>
<a><span class="close"><img src="images/lock.png"/></span></a>
</header>
<section style="margin-left:60px">
<input type="radio" id="radio1" name="radios" value="radio1" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios" value="radio2">
<label for="radio2">Debit Card</label>
<input type="radio" id="radio3" name="radios"value="radio3">
<label for="radio3">Internet Banking</label>
</section>
<section id="content">
<form method="post" action='./php/TokenProcess.php' id="cardpayment">
<input id="txtEncryptionKey" name="txtEncryptionKey" class="tokenex_encryptionkey"
type="hidden" value="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA8gGPMwBRPuVyJReZGIkW
H/+Bf5pnpDN1bSR2cLYLXVT8CaSnTw74qeboSnktgYCi1D9R3Bj2fYzTIwGGZb8K
inLdxwbqZmHwrE9cFhCaHbG/E0PbqQGhXP2vbniZTT4M0i0Cbi7ES3Bw5zqNbIZZ
nX041QEpxLvIyWPKZCX+fBogNMhWfCF779aclChjHkwZMsufThVWE9xklWGxXiyt
x5aL4I5JPxq0I7cAkZGGs4aF/GxWwPaq7R3wPikJQ0YHnCMfcURzl2Hnw/inqyMy
+JB6djTq2/BdzMAhWTh3cDWq9Xu+gEkb/QCd0n1yYIdKuDISlk/AfHdWe34IvzhV
yQIDAQAB
" />
<div style="float:right;">
<input type='hidden' id='ccType' name='ccType'/>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</div>
<div class="table form-fields">
<div class="row">
<div class="label">Card Number:</div>
<div class="input full"><input type="text" name="ccnumber" id="ccnumber" data-validation="length" data-validation-length="min14" class="tokenex_data" data-validation-error-msg="Enter a valid card number" placeholder="4242424242424242"/><br/></div>
</div>
<div class="row name">
<div class="label">Expires On:</div>
<div class="input size50">
<select name="expiry_month" id="expiry_month" class="styled" data-validation="required">
<option selected>Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expiry_year" id="expiry_year" class="styled" data-validation="required">
<option selected>Select Year</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option> <option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
<div class="valid"></div>
</div>
<div class="row name">
<div class="label">CVV Number:</div>
<div class="input full"><input type="text" name="cvv" id="cvv" placeholder="123" maxlength="3" data-validation="number" data-validation-error-msg="Enter 3 digit CVV"/></div>
</div>
<div class="row name">
<div class="label">Amount:</div>
<div class="input full"><input type="text" name="amount" id="amount" placeholder="10.00" data-validation="number" data-validation-allowing="float" data-validation-error-msg="Enter an amount as 00.00" /></div>
</div>
<div class="row">
<div class="label">Your name:</div>
<div class="input full"><input type="text" name="name_on_card" id="name_on_card" data-validation="required" data-validation-error-msg="Enter Name as on card" placeholder="Enter the name as mentioned on the card"/></div>
</div>
<div class="row name">
<div class="label">Email:</div>
<div class="input full"><input type="text" name="email" id="email" placeholder="Enter your Email ID" data-type="email" data-validation="email"data-validation-error-msg="Enter a valid e-mail"></div>
</div>
<div class="row name">
<div class="label">Mobile Number:</div>
<div class="input full"><input type="text" name="mobileNo" id="mobileNo" maxlength="10" data-validation="number" data-validation-error-msg="Enter a valid 10 digit mobile number" placeholder="Enter mobile number" data-type="number" /></div>
</div>
<input type="hidden" name="merchant_id">
<input type="hidden" name="customerReferenceNo">
</div>
<input type="hidden" name="selectedRadioValue" id="selectedRadioValue" />
<input type="submit" name="btn_process" id="btn_process" class="tokenex_submit" style="float:right" value="Pay Now"/>
</form>
<form method="post" action='./php/IB.php' id="internetpayment" style="margin-top:30px">
<div class="table form-fields">
<div class="row name">
<div class="label">Name:</div>
<div class="input full"><input type="text" name="name" id="Name" data-validation="required" data-validation-error-msg="Enter your name" placeholder="Enter your name"/></div>
</div>
<div class="row name">
<div class="label">Email:</div>
<div class="input full"><input type="text" name="email" data-required="true" data-type="email" data-validation="email"data-validation-error-msg="Enter a valid e-mail" id="email" placeholder="Enter Email address"/></div>
</div>
<div class="row name">
<div class="label">Mobile Number:</div>
<div class="input full"><input type="text" data-validation="number" data-required="number" maxlenth="10" name="Mobile Number" id="mobileNo" data-validation-error-msg="Enter a valid 10digit mobile number" placeholder="Enter your mobile number"/></div>
</div>
<div class="row name">
<div class="label">Bank:</div>
<div class="input size50">
<select name="BankId" class="styled" data-required="true" data-trigger="change">
<option value="CORP">CORPORATION </option>
<option value="HDFC"> HDFC </option>
<option value="ICICI"> ICICI </option>
<option value="IDBI"> IDBI </option>
<option value="SBI"> STATE BANK OF INDIA </option>
<option value="DB"> DEUTSCHE </option>
</select>
</div>
<div class="valid"></div>
</div>
<div class="row name">
<div class="label">Amount:</div>
<div class="input size50"><input type="text" name="amount" id="amount" data-required="true" placeholder="10.00" data-type="float" data-validation="number"data-validation-allowing="float" data-validation-error-msg="Enter amount as 00.00"/></div>
</div>
</div>
<input type="submit" style="float:right" value="Pay Now" class="token_submit" id="btn_process" name="btn_process"/>
</form>
css也是
* { text-decoration: none; margin: 0; padding: 0; outline: none; box-shadow: none; box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -moz-
box-sizing: border-box !important; -ms-box-sizing: border-box !important; }
body { font-family: Arial; font-size: 12px; color: #263240; padding: 0px; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
a { color: #666; }
a:hover { color: #333 }
div#credit-card
{
display: table;
width: 540px;
margin: 0 auto;
border: 1px solid #c1c2c8;
background-color: #eeeeee;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px 4px;
}
div#credit-card > header
{
padding: 10px;
border-bottom: 1px solid #c1c2c8;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #dde0e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dde0e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#dde0e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#dde0e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#dde0e6 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#dde0e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dde0e6',GradientType=0 ); /* IE6-9 */
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
div#credit-card > header .title
{
color: #666;
font-size: 13px;
padding: 15px 0;
margin-left:10px;
padding-left: 100px;
background: no-repeat 20px;
line-height: 32px;
}
div#credit-card > header .close
{
display: table;
float: right;
margin-right:30px;
margin-top:4px;
}
div#credit-card > header .close:hover
{
display: table;
float: right;
opacity: 1;
}
div#credit-card > header .title strong
{
color: #666;
font-size:12px;
}
div#credit-card > section#content
{
padding: 30px;
}
div#credit-card > section#content .table
{
display: table;
width: 100%;
}
div#credit-card > section#content .table > .row
{
display: table-row;
width: 100%;
}
div#credit-card > section#content .table > .row > div
{
display: table-cell;
padding-top: 15px;
}
div#credit-card > section#content .table > .row > div.label
{
min-width: 100px;
width: 120px;
}
div#credit-card > section#content .form-fields .label
{
color: #333;
font-weight: bold;
font-size: 12px;
}
div#credit-card > section#content .form-fields .input
{
padding-left: 0px;
width: 100%;
color: #666;
font-weight: bold;
position: relative;
}
div#credit-card > section#content .form-fields .valid
{
width: 32px;
text-align: left;
padding-left: 10px;
vertical-align: top;
}
div#credit-card > section#content .form-fields .valid img
{
display: block;
margin-top: 2px;
}
div#credit-card > section#content .form-fields .full input, div#credit-card > section#content .form-fields .full select
{
width: 100%;
padding: 5px;
}
div#credit-card > section#content .form-fields input, div#credit-card > section#content .form-fields select
{
background-color: #f7f7f7;
border: 1px solid #d4d4d4;
color: #717171;
cursor: pointer;
-moz-border-radius: 5px; -webkit-border-radius: 5px;border-radius: 5px 5px;
-moz-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.2);
}
div#credit-card > section#content .form-fields input:hover, div#credit-card > section#content .form-fields select:hover
{
-moz-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.4);
}
div#credit-card > section#content .form-fields .size50 input,div#credit-card > section#content .form-fields .size50 select
{
display: inline;
padding-left: 10px;
width: 40%;
padding: 5px;
cursor: pointer;
-moz-border-radius: 5px; -webkit-border-radius: 5px;border-radius: 5px 5px;
}
div#credit-card > section#content .form-fields .size50 input:not(:only-child)
{
margin-right: 19px;
}
div#credit-card > section#content .form-fields .size50 input:last-child
{
margin-right: 0;
}
div#credit-card > section#content .form-fields .size50 input:only-child
{
margin-right: 5px;
}
div#credit-card > section#content .form-fields .error
{
display: block;
color: #f34755;
font-size: 11px;
margin-top:5px;
font-weight: normal;
}
/* Style Select Boxes */
span.customStyleSelectBox { -moz-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px -1px
rgba(0, 0, 0, 0.2);cursor: pointer; padding: 8px; background-color: #949494; border: 1px solid #d4d4d4; color: #717171; -moz-border-radius: 5px; -webkit-border-radius:
5px;border-radius: 5px 5px; line-height: 11px; width: 100% !important }
.size50 span.customStyleSelectBox { width: 49% !important; }
.customStyleSelectBoxInner { padding: 7px 0; background:url(../images/arrow.png) no-repeat center right; width: 100% !important; height: 24px; }
input[type=submit]
{
margin-right:170px;
cursor: pointer;
padding: 12px 40px;
border: 1px solid #0945b9;
color: #fff;
font-weight: 900;
-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px 3px;
-moz-box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, 0.6);
-webkit-box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
margin-top:20px;
background: #5e9af8; /* Old browsers */
background: -moz-linear-gradient(top, #5e9af8 0%, #2f6af2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e9af8), color-stop(100%,#2f6af2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5e9af8 0%,#2f6af2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5e9af8 0%,#2f6af2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5e9af8 0%,#2f6af2 100%); /* IE10+ */
background: linear-gradient(to bottom, #5e9af8 0%,#2f6af2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e9af8', endColorstr='#2f6af2',GradientType=0 ); /* IE6-9 */
}
input[type=submit]:hover
{
background: #2867ef;
}
input[type=submit]:active
{
background: #2867ef;
}
input[type=radio], input[type=checkbox] {
display:none;
}
input[type=radio] + label, input[type=checkbox] + label {
display:inline-block;
margin-left:10px;
margin-top:5px;
padding: 4px 25px;
margin-bottom: 0;
font-size: 12px;
line-height: 20px;
color: #ACACAC;
text-align: center;
font-weight:bold;
vertical-align: middle;
cursor: pointer;
background-color: #ACACAC;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label, input[type=checkbox]:checked + label{
margin-top:5px;
cursor: pointer;
border: 1px solid #0945b9;
color: white;
font-weight: bold;
-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px 3px;
-moz-box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, 0.6);
-webkit-box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 3px 0 -2px rgba(255, 255, 255, 0.6);
background: #5e9af8; /* Old browsers */
background: -moz-linear-gradient(top, #5e9af8 0%, #2f6af2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e9af8), color-stop(100%,#2f6af2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5e9af8 0%,#2f6af2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5e9af8 0%,#2f6af2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5e9af8 0%,#2f6af2 100%); /* IE10+ */
background: linear-gradient(to bottom, #5e9af8 0%,#2f6af2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e9af8', endColorstr='#2f6af2',GradientType=0 ); /* IE6-9 */
}
.cards {
overflow: hidden;
}
.cards li {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
background-image: url('https://www.fethr.com/webapp/images/card_logos.png');
background-position: 0 0;
float: left;
height: 32px;
margin-right: 8px;
text-indent: -9999px;
width: 51px;
}
.cards li:last-child {
margin-right: 10px;
}
.cards .visa_electron {
background-position: 204px 0;
}
.cards .mastercard {
background-position: 153px 0;
}
.cards .maestro {
background-position: 102px 0;
}
.cards .discover {
background-position: 51px 0;
}
.cards .visa.off {
background-position: 0 32px;
}
.cards .visa_electron.off {
background-position: 204px 32px;
}
.cards .mastercard.off {
background-position: 153px 32px;
}
.cards .maestro.off {
background-position: 102px 32px;
}
.cards .discover.off {
background-position: 51px 32px;
}
form input.valid {
background: url('http://paweldecowski.github.com/jQuery-CreditCardValidator/tick.png') 310px no-repeat;
}
请原谅这里的长代码。我有小提琴http://jsfiddle.net/y8UKN/
小提琴已经有一个javascript，可以根据用户输入检测到ccType。当你小提琴时，不要删除它。使用ccType的javascript值设置。如果设置值是'maestro'，cvv应该是hiddden < / p>
答案 0 :(得分：1)
使用jQuery
$('#ccType').change(function(){
if($(this).val() == 'maestro')
$('#cvv').closest('.name').hide();
else
$('#cvv').closest('.name').show();
});
http://jsfiddle.net/trevordowdle/y8UKN/1/
我取消了你的ccType字段，但如果你输入maestro然后点击它，你会看到cvv dissapear。
所以当你点击不同的牌时，如果要更改值，那么它应该适合你。
<强>更新
这是一个更完整的例子
的jQuery
$('.cards li').click(function(){
$('.cards li').removeClass('selected');
$(this).addClass('selected');
$('#ccType').val($(this).html());
if($('#ccType').val() == 'Maestro')
$('#cvv').closest('.name').hide();
else
$('#cvv').closest('.name').show();
});
CSS
.cards li {
opacity: .35;
}
.cards .selected {
opacity: 1;
}