根据单选按钮选择隐藏或显示值

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();