JQUERY問題詢問

jquery javascript

tenno081 2019-01-14 11:36:31 ‧ 1829 瀏覽

分享至

是這樣的我今天做了一個前端的小功能如下圖

點有，下面會再跑出一個日期選項，一個TEXTBOX選項，點無這兩個選項消失
現在我可以做到點友就讓它出現，點無就消失，輸入資料後也能存進資料庫，
但是編輯時卻看不到原先輸入的資料，請問我該怎麼讓他編輯時還能看到編輯前的資料?

這是我的html

 <div class="col-input">
                                <div class="col-inner-wrapper">
                                    <div class="col-input">
                                        <div class="icheck-row input-group-others">
                                            <div class='icheck-row input-group-others'>
                                                <input id="HD_EXPERIENCE_1" name="HD_EXPERIENCE" type="radio" value="A" />
                                                <label for="HD_EXPERIENCE_1">有</label>
                                                <input id="HD_EXPERIENCE_2" name="HD_EXPERIENCE" type="radio" value="B" />
                                                <label for="HD_EXPERIENCE_2">無</label>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-inner-wrapper" id="C_HD_EXPERIENCE_1" style="display:none;">
                                    <div class="col-label">
                                        <label class="control-label">起訖年月：</label>
                                    </div>
                                    <div class="col-input">
                                        <input class="form-control datepicker" id="HD_DateString" name="HD_DateString" type="text" value="" />
                                    </div>
                                    <div class="col-label">
                                        <label class="control-label">現存廔管：</label>
                                    </div>
                                    <div class="col-input">
                                        <input class="form-control" id="HD_VESSEL_NUM" name="HD_VESSEL_NUM" type="text" value="" />
                                    </div>
                                </div>
                            </div>

Jquery

 $("input[type='radio']").change(function () {
        if ($(this).val() == "A") {
            $("#C_HD_EXPERIENCE_1").show();
        }
        else {
            $("#C_HD_EXPERIENCE_1").hide();
        }
    });

看更多先前的討論...收起先前的討論...

耿直小伙 iT邦新手 1 級 ‧ 2019-01-14 13:11:39 檢舉

看不懂你的「編輯」是什麼意思

tenno081 iT邦研究生 4 級 ‧ 2019-01-14 13:28:06 檢舉

就是我有做一個CRUD的功能的表單，而我發問的是裡面的其中一個項目，我可以讓他的前端暫時有我要的方式呈現，而輸入的資料也能寫進資料庫，只是需要修改時卻看不到修改前的資料，例如我現存廔管輸入10，但是修改時卻看不到值這樣。

rainbowrain iT邦新手 2 級 ‧ 2019-01-14 13:55:10 檢舉

你沒有做任何應該能看到值的事情，所以本來就看不到阿
假設你有一個編輯的按鈕，那就是按下編輯後去資料庫把值撈出來填進去 ..

耿直小伙 iT邦新手 1 級 ‧ 2019-01-14 13:57:28 檢舉

那你的name="HD_VESSEL_NUM"這個input必須給value內容

tenno081 iT邦研究生 4 級 ‧ 2019-01-15 09:14:41 檢舉

抱歉恕我愚鈍，我知道需要給value值但我不知道該怎麼給，我只能知道說
我開偵測模式時我的HD_VESSEL_NUM有看到值這樣

rainbowrain iT邦新手 2 級 ‧ 2019-01-15 09:47:36 檢舉

你不知道怎麼給那 HD_VESSEL_NUM 的值是怎麼來的 ..

tenno081 iT邦研究生 4 級 ‧ 2019-01-15 10:03:17 檢舉

應該說是怎麼讓它顯示，我那個是textbox所以是手動輸入，資料有進資料庫
但是卻無法顯示，後來我用內建的razor語法就能顯示
```
@Html.TextBoxFor(m => m.HD_VESSEL_NUM, new { @class = "form-control" })
```
目前就剩下radiobutton的問題@@

fillano iT邦超人 1 級 ‧ 2019-01-15 16:28:09 檢舉

那為什麼不用razor語法帶進去？

tenno081 iT邦研究生 4 級 ‧ 2019-01-16 11:53:30 檢舉

因為那個時候遇到一些問題所以沒用，後來那問題克服後就繼續使用@@
那現在只剩下顯示的問題，我目前可以在新增表單時讓我下面兩個選項預設
不顯示，按有才有顯示，但編輯時選項上是顯示有可是下面的選項卻沒出現
我需要再點一次有那兩個選項才會出現，請問我該如何處理?
這是我的html
<div class="col-input">
<div class="col-inner-wrapper">
<div class="col-input">
<div class="icheck-row input-group-others">
@Html.CInputRadioFor(m => m.HD_EXPERIENCE, "PN0020")
</div>
</div>
</div>
<div class="col-inner-wrapper" id="C_HD_EXPERIENCE" style="display:none">
<div class="col-label">
<label class="control-label">起訖年月：</label>
</div>
<div class="col-input">
@Html.TextBoxFor(m => m.HD_DateString, new { @class = "form-control datepicker" })
</div>
<div class="col-label">
<label class="control-label">現存廔管：</label>
</div>
<div class="col-input">
@Html.TextBoxFor(m => m.HD_VESSEL_NUM, new { @class = "form-control" })
</div>
</div>
</div>

jquery

$(function () {
$('input[name="HD_EXPERIENCE"]').on('click', function () {

if ($(this).val() == '1') {
$('#C_HD_EXPERIENCE').show();
}
else {
$('#C_HD_EXPERIENCE').hide();
}
});
})

因為那個時候遇到一些問題所以沒用，後來那問題克服後就繼續使用@@
那現在只剩下顯示的問題，我目前可以在新增表單時讓我下面兩個選項預設
不顯示，按有才有顯示，但編輯時選項上是顯示有可是下面的選項卻沒出現
我需要再點一次有那兩個選項才會出現，請問我該如何處理?
這是我的html
 &lt;div class=&quot;col-input&quot;&gt;
                                &lt;div class=&quot;col-inner-wrapper&quot;&gt;
                                    &lt;div class=&quot;col-input&quot;&gt;
                                        &lt;div class=&quot;icheck-row input-group-others&quot;&gt;
                                            @Html.CInputRadioFor(m =&gt; m.HD_EXPERIENCE, &quot;PN0020&quot;)                                            
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;col-inner-wrapper&quot; id=&quot;C_HD_EXPERIENCE&quot; style=&quot;display:none&quot;&gt;
                                    &lt;div class=&quot;col-label&quot;&gt;
                                        &lt;label class=&quot;control-label&quot;&gt;起訖年月：&lt;/label&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-input&quot;&gt;
                                        @Html.TextBoxFor(m =&gt; m.HD_DateString, new { @class = &quot;form-control datepicker&quot; })
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-label&quot;&gt;
                                        &lt;label class=&quot;control-label&quot;&gt;現存廔管：&lt;/label&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-input&quot;&gt;
                                        @Html.TextBoxFor(m =&gt; m.HD_VESSEL_NUM, new { @class = &quot;form-control&quot; })
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;

jquery

$(function () {
        $('input[name=&quot;HD_EXPERIENCE&quot;]').on('click', function () {
       
            if ($(this).val() == '1') {
                $('#C_HD_EXPERIENCE').show();
            }
            else {
                $('#C_HD_EXPERIENCE').hide();
            }
        });  
})

修改

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-01-14 13:49:38

最佳解答

編輯時，要先將值取出帶入到value內。

checkbox的則要用特別的方式處理。

回應 3
分享
檢舉

tenno081 iT邦研究生 4 級 ‧ 2019-01-16 16:25:36 檢舉

你好，能否請問如果我要做一個用checkbox來計算分數，沒點選代表滿分，有點選就扣2分，請問這樣我該如何做?
這是我的HTML

jquery 我目前暫時想到這樣

$(function () {    
        $('input[name="LE_PREPARE_CODES"]').on('change', function () {
            count();
        });
     
        function count() {
            if ($("input:checked[name='LE_PREPARE_CODES']").val() == '關閉門窗') {
               
               
            }
            else if ($("input:checked[name='LE_PREPARE_CODES']").val() == '關閉冷氣/電風扇') {
               
              
            }
            else if ($("input:checked[name='LE_PREPARE_CODES']").val() == '用物準備齊全') {


            }
        }
    })

實際畫面

都不點選就是6分，點選一個選項扣2分，全部點滿0分這樣。

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-01-16 16:51:52 檢舉

拜託html碼不要用圖片。沒人會想要偷你的程式碼的。
先取程式碼還要自已打出來。我想沒人會理你。

而且，這個問題又跟你發問的完全不一樣。
這樣很難回答你耶。

ps:jquery不是這樣用的啦@@"

checkbox的勾選是要用

$("input[type='checkbox']").prop('checked',true);

(上面我只是用一個臨時的元件名，你自已要改你需要的)

tenno081 iT邦研究生 4 級 ‧ 2019-01-16 16:57:02 檢舉

喔，抱歉，我只是想說這樣PO上來好像不太好看，所以改用圖片
下次改進，抱歉

登入發表回應

小魚

iT邦大師 1 級 ‧ 2019-01-15 15:48:53

不確定你的需求,
你要的是getElementById之類的嗎?

回應
分享
檢舉

登入發表回應

vinson

iT邦見習生 ‧ 2019-01-15 21:30:35

首先確認資料庫真的有值
看不是出來是用那套Http Server
方法二種
1.服務端生成初始頁面結果
2.頁面端接收服務端傳送過來資料,Json內容,{"有無":true,"年月":"1911/11/11","現存":100}
再把上述資料,動態生成頁面進行呈現

如果只有單純Html,沒有服務提供Html結果頁面,或者提供資料,那就無法呈現己存放在資料庫的內容

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙