根據單選按鈕選擇隱藏或顯示值

Question

我創建了一個表格，其中的一部分要求用戶選擇他們想要收款還是郵資。 我已經部分工作了，但是因為單選按鈕之一的值是7.25，所以由於某種原因它不起作用。

這是單選按鈕形式的一部分：

<p>Would you like postage(£7.25 extra) or to collect from one of our shops?</p>
<label class="checkbox-inline"></label>
    <input type="radio" required name="delivery[]" class="photo" id="delivery" value="7.25">Postage
</label>
<label class="checkbox-inline">
<input type="radio" name="delivery[]" class="photo" id="collection" value="0"/>Collection

    <div id="7.25" class="desc">
       You have chosen postage
    </div>
    <div id="0" class="desc">
       You have chosen collection
    </div>

這是我目前擁有的腳本：

<script type="text/javascript">
$(document).ready(function() {
    $("div.desc").hide();
    $("input[name$='delivery[]']").click(function() {
        var choice = $(this).val();
        $("div.desc").hide();
        $("#" + choice).show();
    });
});
</script>

就像我說的那樣，如果值是一個整數但由於，這將起作用。 它不是出於某種原因。 為什么會這樣，我該如何分類？ 單選按鈕的值是數字，因為這會影響總價

Answer 1

當您調用$("#7.25")它認為7是ID，而25是類，因為. 代表一個班級。

另外，您不應使用數字作為ID。 如果確實要在ID中輸入數字，請以類似k_7的字母k_7

有很多方法可以解決此問題，在下面的示例中，我向inputs添加了data-descTarget="k_0"並更改了div的ID。

演示版

 $(document).ready(function() { $("div.desc").hide(); $("input[name$='delivery[]']").click(function() { var choice = $(this).attr("data-descTarget"); $("div.desc").hide(); $("#" + choice).show(); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Would you like postage(£7.25 extra) or to collect from one of our shops?</p> <label class="checkbox-inline"></label> <input type="radio" required name="delivery[]" class="photo" id="delivery" data-descTarget="k_0" value="7.25">Postage </label> <label class="checkbox-inline"> <input type="radio" name="delivery[]" class="photo" id="collection" data-descTarget="k_1" value="0"/>Collection <div id="k_0" class="desc"> You have chosen postage </div> <div id="k_1" class="desc"> You have chosen collection </div> 

Answer 2

這將為您提供幫助。 因為您不能將ID與. 並且您不應使用數字作為ID。 您可以使用數據屬性。

<p>Would you like postage(£7.25 extra) or to collect from one of our shops?</p>
<label class="checkbox-inline">
    <input type="radio" required name="delivery[]" class="photo" id="delivery" value="7.25">Postage
</label>
<label class="checkbox-inline">
<input type="radio" name="delivery[]" class="photo" id="collection" value="0"/>Collection
</label>
<div data-id="7.25" class="desc">
  You have chosen postage
</div>
<div data-id="0" class="desc">
  You have chosen collection
</div>

腳本

$(document).ready(function() {
    $("div.desc").hide();
    $("input[name$='delivery[]']").click(function() {
        var choice = $(this).val();
        $("div.desc").hide();
       $('*[data-id="'+choice+'"]').show();
    });
});

https://jsfiddle.net/8hmuk0xg/

Answer 3

您無法在jQuery中選擇＃7.25，但可以使用vanillaJS進行選擇！

$("#" + choice).show();

寫下這個$(document.getElementById(choice)).show();