php 20180913收音机，选择の选択で表の表示，非表示を切り替える
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了php 20180913收音机，选择の选択で表の表示，非表示を切り替える相关的知识，希望对你有一定的参考价值。
/* -----------------------------------------------------------
con_request
----------------------------------------------------------- */
.con_request {
@extend %bw_s;
@extend %cf;
margin-bottom: 3em;
.tbl_primary {
width: 100%;
tr {
border: 1px solid #ddd;
width: 100%;
}
th, td {
padding: 0.6em 1.5em;
border-bottom: 1px solid #ddd;
@include mq(sp) {
padding: 0.6em 1em;
width: 100%;
display: block;
}
input, select {
border:1px solid #acacac;
padding: 0.3em 1em;
@include mq(sp) {
width: 100%;
padding: 0.3em 0.8em;
}
}
}
th {
width: 25%;
overflow: hidden;
text-align: left;
background: #eee;
font-weight: normal;
@include mq(sp) {
width: 100%;
}
span {
float: right;
color: #cc0000;
padding-left: 0.5em;
font-size: .8em;
line-height: 2.5;
}
}
.select{
select {
width: 45%;
@include mq(tab) {
width: 45%;
}
@include mq(sp) {
width: 100%;
}
}
}
.group {
display: none;
textarea{
width: 50%;
}
}
.siryo {
display: none;
}
.name {
input {
width: 40%;
margin-right: 1em;
@include mq(tab) {
width:80%;
}
@include mq(sp) {
width: 100%;
margin: 0.3em 0;
}
}
}
.adress {
display: none;
.add {
input {
width: 80%;
}
}
.txt_zip {
font-size: .9em;
}
}
.tel, .email {
input {
width: 60%;
border:1px solid #acacac;
@include mq(tab) {
width: 80%;
}
@include mq(sp) {
width: 100%;
}
}
}
.tel {
input {
width: 30%;
}
}
.mail {
input {
width: 50%;
}
}
.text{
textarea{
width: 95%;
height: 150px;
border:1px solid #acacac;
@include mq(sp) {
width: 100%;
}
}
}
}//.tbl_basic
.box_btn01 {
margin: 2em 0;
text-align: center;
.btn {
width: 320px;
margin: 0 auto;
@include mq(sp) {
width: 100%;
}
}
}
.box_btn02 {
margin: 2em 0;
display: flex;
justify-content: center;
@include mq(sp) {
display: block;
}
.btn {
width: 320px;
margin: 0;
margin-left: 1%;
display: inline-block;
&:first-child {
margin-left: 0;
}
a,input {
width: 320px;
display: inline-block;
text-align: center;
@include mq(sp) {
width: 100%;
}
}
@include mq(sp) {
width: 100%;
margin-left: 0;
margin-bottom: 10px;
}
&.btn_next {
input {
border: 2px solid #000;
}
}
}
}
}//selectでvalue3を選択でform表示切り替え
//radioで表示切り替え
//▼実装テストアップ
//http://ftp.west02.ab-ss.com/asahiair.com/html/contact/
//▼select参考サイト
//https://goo.gl/6b5WQk
<script>
$(function() {
$('[name="group"]:radio').change( function() {
if($('[id=b]').prop('checked')){
$('.group').fadeIn();
} else if ($('[id=a]').prop('checked')) {
$('.group').fadeOut();
}
});
$('[name="siryo"]:radio').change( function() {
if($('[id=c]').prop('checked')){
$('.adress').fadeIn();
} else if ($('[id=d]').prop('checked')) {
$('.adress').fadeOut();
}
});
var target = $('.select_con option:selected').val();
$(".select_con").change(function() {
var extraction_val = $(".select_con").val();
if(extraction_val == "3") {
$('.siryo').css('display', 'table-row');
$('.adress').css('display', 'table-row');
}else {
$('.siryo').css('display', 'none');
$('.adress').css('display', 'none');
}
});
});
</script>
<table class="tbl_primary">
<tr class="select">
<th>お問い合わせ項目<span>※</span></th>
<td>
<select name="contact_type" class="select_con">
<option label="お選びください" value="1">お選びください</option>
<option label="朝日航空について" value="2">朝日航空について</option>
<option label="パイロット育成事業について" value="3">パイロット育成事業について</option>
<option label="航空事業について" value="4">航空事業について</option>
<option label="航空設備について" value="5">航空設備について</option>
<option label="その他" value="6">その他</option>
</select>
</td>
</tr>
<tr class="group_r">
<th>団体/個人<span>※</span></th>
<td>
<input type="radio" name="group" id="a" value="個人"> 個人
<input type="radio" name="group" id="b" value="団体"> 団体
</td>
</tr>
<tr class="group">
<th>所属団体名<span>※</span></th>
<td>
<textarea name="content" placeholder="所属団体名をご記入下さい"></textarea>
</td>
</tr>
<tr class="group">
<th>部署名</th>
<td>
<textarea name="content" placeholder="部署名をご記入下さい"></textarea>
</td>
</tr>
<tr class="siryo">
<th>資料請求<span>※</span></th>
<td>
<input type="radio" name="siryo" id="c" value="はい" checked> はい
<input type="radio" name="siryo" id="d" value="いいえ"> いいえ
</td>
</tr>
<tr class="name">
<th>お名前<span>※</span></th>
<td>
<input type="text" name="name[0]" value="" placeholder="例) 山田 太郎">
</td>
</tr>
<tr class="name">
<th>フリガナ<span>※</span></th>
<td>
<input type="text" name="kana[0]" value="" placeholder="例) ヤマダ タロウ">
</td>
</tr>
<tr class="adress">
<th>郵便番号<span class="kome">※</span></th>
<td colspan="2">
〒 <input class="f-form-text size_ss" name="zip" value="" maxlength="8" type="text" onkeyup="AjaxZip3.zip2addr(this,'','address','address');" placeholder="581-0043">
<p class="txt_zip">ご入力いただくと自動でご住所が入力されます。</p></td>
</tr>
<tr class="adress">
<th>ご住所<span class="kome">※</span></th>
<td class="add"><input class="f-form-text size_m" type="text" name="address" value="" placeholder="例) 大阪府八尾市空港2-12">
</tr>
<tr class="tel">
<th>お電話番号<span >※</span></th>
<td>
<input type="tel" name="tel" value="" placeholder="例) 072-991-7245">
</td>
</tr>
<tr class="email">
<th>メールアドレス<span >※</span></th>
<td>
<input type="email" name="mail" value="" placeholder="例) info@asahiair.co.jp">
</td>
</tr>
<tr class="text">
<th>お問い合わせ内容<span>※</span></th>
<td>
<textarea name="content" placeholder=" お問い合わせ内容を出来るだけ具体的にご記入ください。"></textarea>
</td>
</tr>
</table>以上是关于php 20180913收音机，选择の选択で表の表示，非表示を切り替える的主要内容，如果未能解决你的问题，请参考以下文章
html フォームでのファイルの选択と同时にアップロード开始（jQuery form plugin）
python LIBLINEARのパラメータ（成本，偏见）のグリッドサーチを行うスクリプト。ソルバーも复数から最适なものを选択できる。