单击标签并将数据传递到URL时如何选择单选按钮？

Question

I would like to be able to select a radio button when clicking on "label" and then pass that value to the URL.

Here's the URL Prefill code below.

It works if you select the actual radio button. However, I realized that if you click on label it doesn't select the radio button.

So i added this top part jquery code to solve that issue. However, it doesn't pass the value to the URL.

I'd like to stylize radio buttons by hiding input part and adding pseudoclasses. so i wonder if there's a way to pass radio button value when label is clicked on?

 $(function(){ $('li').click(function(){$(this).find('input[type=radio]').prop('checked', true);}); }); /* URL Prefill Code */ var form = document.getElementById('form-product-choices'); form.addEventListener('change', function(e){ var actionUrl = 'https://example.com/'; var radioButtons = document.getElementsByName('product-choice'); for( var i = 0; i < radioButtons.length; i++ ) { if( radioButtons[i].checked ) { actionUrl += '?product-choice=' + radioButtons[i].value; break; } } document.getElementById('action-link').href = actionUrl; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <form id='form-product-choices' action=''> <main role="main"> <section id="p1"> <ul> <li><label for="radio"><input type='radio' name='product-choice' value='regular' /> regular</label></li> <li><label for="radio"><input type='radio' name='product-choice' value='double' /> double</label></li> <li><label for="radio"><input type='radio' name='product-choice' value='max-xl' /> xl</label></li> </ul> <a class="quizbut">Next</a> </section> <section id="p4"> <a id='action-link' class='quizbut' href=''>Click to continue</a> </section> </main> </form> 

Answer 1

First of all, we don't need JQuery code for select the radio button when clicking the label. Instead of this you can able to use below code,

<label for="regular">
  <input type='radio' name='product-choice' value='regular' id="regular" /> regular
</label>

For achieving this, Need to set the ID attribute in textbox and use that ID attribute value on label 'for' attribute.

Below, I have added a full code. Hope this will help.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<form id='form-product-choices' action=''>
    <main role="main">
        <section id="p1">
            <ul>
                <li>
                    <label for="regular">
                        <input type='radio' name='product-choice' value='regular' id="regular" /> regular
                    </label>
                </li>
                <li>
                    <label for="double">
                        <input type='radio' name='product-choice' value='double' id="double" /> double
                    </label>
                </li>
                <li>
                    <label for="xl">
                        <input type='radio' name='product-choice' value='max-xl' id="xl"  /> xl
                    </label>
                </li>
            </ul>
            <a class="quizbut">Next</a>
        </section>

        <section id="p4">
            <a id='action-link' class='quizbut' href='javascript:void(0)'>Click to continue</a>
        </section>
    </main>
</form>

<script type="text/javascript">
    $("#action-link").click(function(){
        var getVal = $('input[name=product-choice]:checked').val();
        window.location.href='https://example.com/test.cfm?product-choice='+getVal;
    });
</script>

Answer 2

On the label, associate the for attribute with a corresponding id on each of the radio buttons. The ids should be unique between them.

 $(function(){ $('li').click(function(){$(this).find('input[type=radio]').prop('checked', true);}); }); /* URL Prefill Code */ var form = document.getElementById('form-product-choices'); form.addEventListener('change', function(e){ var actionUrl = 'https://example.com/'; var radioButtons = document.getElementsByName('product-choice'); for( var i = 0; i < radioButtons.length; i++ ) { if( radioButtons[i].checked ) { actionUrl += '?product-choice=' + radioButtons[i].value; break; } } document.getElementById('action-link').href = actionUrl; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <form id='form-product-choices' action=''> <main role="main"> <section id="p1"> <ul> <li><label for="regular"><input id="regular" type='radio' name='product-choice' value='regular' /> regular</label></li> <li><label for="double"><input id="double" type='radio' name='product-choice' value='double' /> double</label></li> <li><label for="max"><input id="max" type='radio' name='product-choice' value='max-xl' /> xl</label></li> </ul> <a class="quizbut">Next</a> </section> <section id="p4"> <a id='action-link' class='quizbut' href=''>Click to continue</a> </section> </main> </form>