[英]Radio Input Check/Uncheck when clicked on label
I am creating a customer preference section where the customer can select if he is interested in a fruit or not by clicking on one of two radio buttons. 我正在创建一个“客户偏好设置”部分,客户可以通过单击两个单选按钮之一来选择他是否对水果感兴趣。 The problem is, I want to allow customer to leave his preference undefined on a fruit by allowing null radio button/uncheck the radio button when clicked again.
问题是,我想允许客户通过允许空单选按钮/在再次单击时取消选中单选按钮来使自己的偏好在水果上保持未定义。
The JS is only adding classes to the radio buttons loaded via php with checked="checked" and adding a class to the parent label for CSS because on front end it appears as a button group as follows: JS只是将类添加到带有php =“ checked”的通过php加载的单选按钮,并将类添加到CSS的父标签,因为在前端,它作为按钮组显示如下:
I tried looking it up stack overflow but no solutions worked.
我尝试查找堆栈溢出,但没有解决方案。
$('input:not(:checked)').parent().removeClass("radio_checked"); $('input:not(:checked)').removeAttr("checked"); $('input:checked').parent().addClass("radio_checked"); $('input').click(function() { $('input:not(:checked)').parent().removeClass("radio_checked"); $('input:not(:checked)').removeAttr("checked"); $('input:checked').parent().addClass("radio_checked"); });
#customer_preferences_form{ margin-top: 50px; padding-right: 6.5%; } .container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{ margin-left: 6.5%; margin-top: 20px; width: 43.5%; float: left; border: 1px solid grey !important; border-radius: 6px; padding: 0 !important; overflow: hidden; } .field_title{ border-bottom: 1px solid grey !important; margin: 0 !important; padding: 5px 15px; display: inline-block; width: 100%; float: left; } .field_title label{ text-align: center; font-size: 18px!important; font-weight: normal!important; margin: 0 0 3px; width: 100% !important; display:inline-block; cursor: default !important; } #customer_preferences_form label{ width: 50%; display: inline-block; float: left; text-align: center; padding: 5px 0px; cursor: pointer; } #customer_preferences_form label:nth-child(2){ border-right: 1px solid black; } #customer_preferences_form input[type="radio"]{ display:none; } #customer_preferences_form .radio_checked{ color: #00d8a9; background: #FAFAFA; font-weight:bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container_mango"> <div class="field_title"> <label>Mango</label> </div> <label> <input type="radio" name="mango" value="1"> Not Interested </label> <label> <input type="radio" name="mango" value="2"> My Fav! </label> </div> <div class="container_pineapple"> <div class="field_title"> <label>Pineapple</label> </div> <label> <input type="radio" name="pineapple" value="1" checked="checked"> Not Interested </label> <label> <input type="radio" name="pineapple" value="2"> My Fav! </label> </div>
What you have is all a bit less than optimal. 您所拥有的一切都不是最优的。
First off you should give your inputs a class to not get all your inputs in scope, but we will ignore that for now but WILL give it a proper type and anchor it to a NEW div I added with the ID not in the original. 首先,您应该为您的输入提供一个类,以使您的输入不在范围内,但是我们暂时将其忽略,但将为其提供适当的类型并将其锚定到我添加的ID不位于原始ID中的新div上。
Do NOT remove or try to add the checked attribute, it happens on change automatically and doing it will prevent resetting it. 请勿删除或尝试添加选中的属性,该属性会在更改时自动发生,并且这样做会阻止对其进行重置。 Use
.prop()
instead if needed. 如果需要,请改用
.prop()
。
One issue you need is that you need to find the siblings of the radio that changed and set those - they will "unset/change" - radios are single of a group BUT the change event will not fire in "unset" cases hooked this way. 您需要解决的一个问题是,您需要查找已更改的无线电的同级并将其设置-它们将“重置/更改”-无线电是组中的单个,但更改事件在以这种方式钩住的“未设置”情况下不会触发。 You COULD give them ALL a class and anchor to that but I present a solution without that extra in the markup.
您可以给他们全部一个类,并以此作为锚点,但是我提出了一个解决方案,在标记中没有多余的内容。
Don't use the click event, use change, (what if it changes via script?) 不要使用click事件,请使用change(如果通过脚本进行更改会怎样?)
$('#customer_preferences_form') .on('click','label', function(event){ event.preventDefault(); event.stopImmediatePropagation(); var myradio = $(this).find('input[type=radio]'); var isChecked = myradio.is(":checked"); myradio.prop("checked",!isChecked ); myradio.trigger('setlabelstate'); }); $('#customer_preferences_form') .on('change setlabelstate','input[type=radio]',function() { // I used the label here to prevent the DIV sibling with title from // having that class added - only the label siblings are needed. var mySiblings = $(this).parent('label').siblings('label'); var radios = $(this).parent('label') .add(mySiblings ); radios.each(function(){ var isChecked = $(this).find('input[type=radio]').is(":checked"); $(this).toggleClass("radio_checked", isChecked ); }); }); // custom event to set that initial state $('#customer_preferences_form') .find('input[type=radio]') .trigger('setlabelstate');
#customer_preferences_form{ margin-top: 50px; padding-right: 6.5%; } .container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{ margin-left: 6.5%; margin-top: 20px; width: 43.5%; float: left; border: 1px solid grey !important; border-radius: 6px; padding: 0 !important; overflow: hidden; } .field_title{ border-bottom: 1px solid grey !important; margin: 0 !important; padding: 5px 15px; display: inline-block; width: 100%; float: left; } .field_title label{ text-align: center; font-size: 18px!important; font-weight: normal!important; margin: 0 0 3px; width: 100% !important; display:inline-block; cursor: default !important; } #customer_preferences_form label{ width: 50%; display: inline-block; float: left; text-align: center; padding: 5px 0px; cursor: pointer; } #customer_preferences_form label:nth-child(2){ border-right: 1px solid black; } #customer_preferences_form input[type="radio"]{ display:none; } #customer_preferences_form label.radio_checked{ color: #00d8a9; background: #FAFAFA; font-weight:bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="customer_preferences_form"> <div class="container_mango"> <div class="field_title"> <label>Mango</label> </div> <label> <input type="radio" name="mango" value="1"> Not Interested </label> <label> <input type="radio" name="mango" value="2"> My Fav! </label> </div> <div class="container_pineapple"> <div class="field_title"> <label>Pineapple</label> </div> <label> <input type="radio" name="pineapple" value="1" checked="checked"> Not Interested </label> <label> <input type="radio" name="pineapple" value="2"> My Fav! </label> </div> </div>
Check this out it's working. 检查一下是否正常。
$('input:not(:checked)').parent().removeClass("radio_checked"); $('input:not(:checked)').removeAttr("checked"); $('input:checked').parent().addClass("radio_checked"); $('input:checked').parent().addClass("selected"); $('input').click(function() { $('input:not(:checked)').parent().removeClass("radio_checked"); $('input:not(:checked)').parent().removeClass("selected"); $('input:not(:checked)').removeAttr("checked"); $('input:checked').parent().addClass("radio_checked"); $('input:checked').parent().addClass("selected"); }); $('input[type=radio]').hide();
#customer_preferences_form { margin-top: 50px; padding-right: 6.5%; } .container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango { margin-left: 6.5%; margin-top: 20px; width: 43.5%; float: left; border: 1px solid grey !important; border-radius: 6px; padding: 0 !important; overflow: hidden; } .field_title { border-bottom: 1px solid grey !important; margin: 0 !important; padding: 5px 15px; display: inline-block; width: 100%; float: left; } .field_title label { text-align: center; font-size: 18px!important; font-weight: normal!important; margin: 0 0 3px; width: 100% !important; display: inline-block; cursor: default !important; } #customer_preferences_form label { width: 50%; display: inline-block; float: left; text-align: center; padding: 5px 0px; cursor: pointer; } #customer_preferences_form label:nth-child(2) { border-right: 1px solid black; } #customer_preferences_form input[type="radio"] { display: none; } #customer_preferences_form .radio_checked { color: #00d8a9; background: #FAFAFA; font-weight: bold; } .selected { background-color: #ffb3b3; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container_mango"> <div class="field_title"> <label>Mango</label> </div> <label> <input type="radio" name="mango" value="1"> Not Interested </label> <label> <input type="radio" name="mango" value="2"> My Fav! </label> </div> <div class="container_pineapple"> <div class="field_title"> <label>Pineapple</label> </div> <label> <input type="radio" name="pineapple" value="1"> Not Interested </label> <label> <input type="radio" name="pineapple" value="2"> My Fav! </label> </div>
UPDATE : If you want to uncheck radio button if clicked again. 更新 :如果要取消选中单选按钮,请再次单击。 Check below snippet
检查以下代码段
$('input:not(:checked)').parent().removeClass("radio_checked"); $('input:not(:checked)').parent().removeClass("selected"); $('input:not(:checked)').removeAttr("checked"); $('input:checked').parent().addClass("radio_checked"); $('input:checked').parent().addClass("selected"); $('input:not(:checked)').parent().removeClass("radio_checked"); $('input[type=radio]').hide(); if ($('input:checked').is(':checked')) { $('input:checked').prop('checked', true); $('input:checked').data('waschecked', true); } $('input[type="radio"]').click(function() { var $radio = $(this); // if this was previously checked if ($radio.data('waschecked') == true) { $radio.prop('checked', false); $radio.data('waschecked', false); $radio.parent().removeClass("selected"); } else { $radio.prop('checked', true); $radio.data('waschecked', true); $radio.parent().addClass("selected"); } $radio.parent().siblings('label').children('input[type="radio"]').data('waschecked', false); $radio.parent().siblings('label').removeClass("selected"); });
#customer_preferences_form { margin-top: 50px; padding-right: 6.5%; } .container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango { margin-left: 6.5%; margin-top: 20px; width: 43.5%; float: left; border: 1px solid grey !important; border-radius: 6px; padding: 0 !important; overflow: hidden; } .field_title { border-bottom: 1px solid grey !important; margin: 0 !important; padding: 5px 15px; display: inline-block; width: 100%; float: left; } .field_title label { text-align: center; font-size: 18px!important; font-weight: normal!important; margin: 0 0 3px; width: 100% !important; display: inline-block; cursor: default !important; } #customer_preferences_form label { width: 50%; display: inline-block; float: left; text-align: center; padding: 5px 0px; cursor: pointer; } #customer_preferences_form label:nth-child(2) { border-right: 1px solid black; } #customer_preferences_form input[type="radio"] { display: none; } #customer_preferences_form .radio_checked { color: #00d8a9; background: #FAFAFA; font-weight: bold; } .selected { background-color: #ffb3b3; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container_mango"> <div class="field_title"> <label>Mango</label> </div> <label> <input type="radio" name="mango" value="1" > Not Interested </label> <label> <input type="radio" name="mango" value="2" checked="checked"> My Fav! </label> </div> <div class="container_pineapple"> <div class="field_title"> <label>Pineapple</label> </div> <label> <input type="radio" name="pineapple" value="1"> Not Interested </label> <label> <input type="radio" name="pineapple" value="2"> My Fav! </label> </div>
UPDATE 2 : Fixed the bug in snippet 2 reported by Junaid Saleem 更新2 :修复了Junaid Saleem报告的代码段2中的错误
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.