iT邦幫忙

0

想請問我的這段JQUERY該怎麼修改

https://ithelp.ithome.com.tw/upload/images/20190121/20110132rR13lhGgRV.jpg

這是我表單中的其中一欄,點下其中一個選項後,會把你點選的選項印在評值結果裡
並根據你點選的選項帶入相對應的建議,目前我都可以做到把點選的選項印出也可以
根據我點的選項帶入相對印的建議,只剩下順序及我點選後跑出對應字體時若我再打
字並點選按鈕我打的字都會被蓋掉,想請問我該如何解決?

這是我的html

 <div class="col-input">
                                        <div class="icheck-row input-group-others">                                                                           
                                            @Html.CInputCheckboxFor(m => m.LE_PREPARE_CODES, "PN0027" ,new{@class="cs"})                                                                                
                                            <input type="hidden" id="LE_PREPARE_NOTES_1" value="關閉門窗" />  
                                            <input type="hidden" id="LE_PREPARE_NOTES_2" value="關閉冷氣/電風扇" />  
                                            <input type="hidden" id="LE_PREPARE_NOTES_3" value="用物準備齊全" /> 

                                            <input type="hidden" id="LE_PREPARE_SUGGEST_1" value="關閉門窗" />
                                            <input type="hidden" id="LE_PREPARE_SUGGEST_2" value="關閉冷氣/電風扇" />
                                            <input type="hidden" id="LE_PREPARE_SUGGEST_3" value="用物準備齊全" />                                                                                                                                                          
                                        </div>
                                    </div>
                                      
                                </div><!-- /.row -->                              
                                <div class="row-flex">
                                    <div class="col-label">
                                        <label class="control-label">評值結果</label>
                                    </div>
                                    <div class="col-input">
                                        <div class="icheck-row input-group-others">
                                            @Html.TextAreaFor(m => m.LE_PREPARE_NOTE, new { @class = "form-control"})
                                        </div>
                                    </div>
                                </div><!-- /.row -->
                                <div class="row-flex">
                                    <div class="col-label">
                                        <label class="control-label">護理措施及建議</label>
                                    </div>
                                    <div class="col-input">
                                        <div class="icheck-row input-group-others">
                                            @Html.TextAreaFor(m => m.LE_PREPARE_SUGGEST, new { @class = "form-control" })
                                        </div>
                                    </div>
                                </div><!-- /.row -->

jquery評值結果

 var text1 = "";           
            $('input[name="LE_PREPARE_CODES"]:checked').each(function () {

                text1 += $('#LE_PREPARE_NOTES_' + $(this).val()).val() + ',';
            });
            text1 = text1.substring(0, text1.length - 1);
            console.log(text1);
            $('#LE_PREPARE_NOTE').val(text1);
                       

jquery建議

 var text1 = "";
            $('input[name="LE_PREPARE_CODES"]:checked').each(function () {

                text1 += $('#LE_PREPARE_SUGGEST_' + $(this).val()).val() + ',';
            });
            text1 = text1.substring(0, text1.length - 1);
            $('#LE_PREPARE_SUGGEST').val(text1);

執行結果
https://ithelp.ithome.com.tw/upload/images/20190121/20110132QgJcV055Dg.jpg

就是如果我想著選,我跟怎麼做才能變成"用物準備齊全,關閉冷氣/電風扇,關閉門窗"
且我若點選後再加上一些字然後再點選的話我打的字也不會被覆蓋掉
如"用物準備齊全12,關閉冷氣/電風扇,關閉門窗"這樣,還請各位為我解答一下,謝謝。

柯柯 iT邦新手 5 級 ‧ 2019-01-21 10:48:22 檢舉
打字後再點選 跟 點選 都用append去添加值吧
$('#LE_PREPARE_SUGGEST').append(text1);

http://www.w3school.com.cn/jquery/manipulation_append.asp
0
Aka程式狗
iT邦新手 4 級 ‧ 2019-01-21 11:49:25
最佳解答
<input type="checkbox" name="c1[]" value="關閉門窗">關閉門窗
<input type="checkbox" name="c1[]" value="關閉冷氣/電風扇">關閉冷氣/電風扇 
<input type="checkbox" name="c1[]" value="用物準備齊全">用物準備齊全          <br />
評值結果
<br />
<textarea name="t1"></textarea>

$('input[name="c1[]"]').on('click', function(e) {
  var c1 = $(this).val();
  var t1 = $('textarea[name="t1"]').val();
  if (c1 != '') {
    t1 += c1 + ',';
    $('textarea[name="t1"]').val(t1);
  }
});
看更多先前的回應...收起先前的回應...
tenno081 iT邦新手 5 級 ‧ 2019-01-21 13:45:22 檢舉

你好,這是我參考後的修改,還是有部分問題

還請幫我看看我是哪裡有錯,謝謝。

http://jsfiddle.net/p39z7yft/2/

個人建議你先把功能拆開來看,真的理解程式碼再用你自己的撰寫方式,你先重新整理一下每個id、name命名對應的dom,以及是否真的有需要用到change這個事件,下面這段code是可以用的。

$(function () {
  $('input[name="LE_PREPARE_CODES"]').on('click', function(e) {
  	var ele = $(this);
    if (ele.prop('checked')) {
      var c1 = ele.val();
      var t1 = $('#LE_PREPARE_NOTE').val();

      if (c1 != '') {
        t1 += c1 + ',';
        $('#LE_PREPARE_NOTE').val(t1);
      }
    }
  });
});
tenno081 iT邦新手 5 級 ‧ 2019-01-22 08:52:11 檢舉

我解決了,感謝解答

不客氣

0
Luis-Chen
iT邦新手 5 級 ‧ 2019-01-21 10:36:04
tenno081 iT邦新手 5 級 ‧ 2019-01-21 11:10:33 檢舉

用陣列的話,比如我值是[1,2,3],能倒著選變成[3,2,1]甚至是[2,1,3]或[3,1,2]這樣嗎?

Luis-Chen iT邦新手 5 級 ‧ 2019-01-21 11:18:34 檢舉

Luis-Chen iT邦新手 5 級 ‧ 2019-01-21 11:42:58 檢舉

因為我考慮到你可能會想要取消勾選後文字也能拿掉所以才用array處理,當然直接delete就好,只是我看你說自己打字後再勾選文字會被蓋掉可能是因為你的jquery評值結果寫法問題,你也許可以先改成用樓上回覆得append在欄位新增文字就好 不要直接用checkbox控制欄位value

0
yoching
iT邦高手 1 級 ‧ 2019-01-21 11:49:05

以下這一段給你參考,用的是文字取代的方式來符合你要的。不懂的話再問

<body>       

        <div class="main">
            <input type="checkbox" name="i[]" value="AAA" />AAA
            <input type="checkbox" name="i[]" value="BBB" />BBB
            <input type="checkbox" name="i[]" value="CCC" />CCC
            <textarea id="mmm"></textarea>
        </div>
        <script type="text/javascript">
            $("input[name='i[]']").change(function(){
                var sel = $(this).prop('checked');
                var txt = $(this).val();
                var text = $("#mmm").val();
                
                if(sel){
                    //進行文字加入動作
                    $("#mmm").val(text+txt);
                }else{
                    //進行文字移除動作
                    var myRegExp	= new RegExp(txt, 'g');
                    text = text.replace(myRegExp, "");
                    $("#mmm").val(text);                    
                }
            });
        </script>
    </body>

其原理很簡單,因該你的textarea其包含了選擇及自訂式。但對程式來說,它還是只有一個獨立個體。並不會自行區分對應的選擇。

目前這樣的做法是屬於後點在後置的方式。這是因為要搭配你的自選式文字處理。
我也並未給你加上,號。你要自行去改良。

如果是要做到選項內各自對應文字的情況,也不是沒辦法做到。
我有預留後筆給你參考。如果你有注意到的話。
我的移除是用正則的方式處理。

換句話說,使用正則就可以達到你想要的多重效果。
這部份我就不直接點明了。還請你自行研究試試吧。

真不行的話再給你答案。

我要發表回答

立即登入回答