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

Question

我希望能够在单击“标签”时选择一个单选按钮，然后将该值传递给URL。

这是下面的URL预填充代码。

如果选择实际的单选按钮，它将起作用。 但是，我意识到，如果单击标签，则不会选择单选按钮。

因此，我添加了此顶级jquery代码来解决该问题。 但是，它不会将值传递给URL。

我想通过隐藏输入部分并添加伪类来样式化单选按钮。 所以我想知道是否有一种方法可以在单击标签时传递单选按钮值？

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

首先，单击标签时，我们不需要JQuery代码来选择单选按钮。 除此之外，您可以使用以下代码，

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

为此，需要在文本框中设置ID属性，并在标签“ for”属性上使用该ID属性值。

在下面，我添加了完整的代码。 希望这会有所帮助。

<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

在标签上，将for属性与每个单选按钮上的对应id关联。 这些ID在它们之间应该是唯一的。

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