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

Question

I have created a form and part of it requires the user to select whether they would like collection or postage. What I have partially works but because the the value for one of the radio buttons is 7.25 it does not work for some reason.

This the radio button part of the form:

<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>

And this is the script I have at the moment:

<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>

Like I said this would work if the value was a whole number but because of the . it does not for some reason. Why is this the case and how do I sort this? The values of the radio buttons are numbers as this affects the total price

Answer 1

When you call $("#7.25") it believes that 7 is the ID and 25 is a class, because . represents a class.

Also, you should not use numbers as ID. If you do want a number in the ID, start with a letter like k_7

There are many ways to fix this, in the example below, I've added data-descTarget="k_0" to the inputs and changed the ids of the div's.

Demo

 $(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

This will help you. as you cant put id with . and you should not use number as id. you could use data attribute.

<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>

script

$(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

You can't select #7.25 in jQuery, but you can do it using vanillaJS!

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

Write this $(document.getElementById(choice)).show();