单击标签时选中/取消选中无线电输入

Question

我正在创建一个“客户偏好设置”部分，客户可以通过单击两个单选按钮之一来选择他是否对水果感兴趣。 问题是，我想允许客户通过允许空单选按钮/在再次单击时取消选中单选按钮来使自己的偏好在水果上保持未定义。

JS只是将类添加到带有php =“ checked”的通过php加载的单选按钮，并将类添加到CSS的父标签，因为在前端，它作为按钮组显示如下： 我尝试查找堆栈溢出，但没有解决方案。

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

Answer 1

您所拥有的一切都不是最优的。

首先，您应该为您的输入提供一个类，以使您的输入不在范围内，但是我们暂时将其忽略，但将为其提供适当的类型并将其锚定到我添加的ID不位于原始ID中的新div上。

请勿删除或尝试添加选中的属性，该属性会在更改时自动发生，并且这样做会阻止对其进行重置。 如果需要，请改用.prop() 。

您需要解决的一个问题是，您需要查找已更改的无线电的同级并将其设置-它们将“重置/更改”-无线电是组中的单个，但更改事件在以这种方式钩住的“未设置”情况下不会触发。 您可以给他们全部一个类，并以此作为锚点，但是我提出了一个解决方案，在标记中没有多余的内容。

不要使用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> 

Answer 2

检查一下是否正常。

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

更新 ：如果要取消选中单选按钮，请再次单击。 检查以下代码段

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

更新2 ：修复了Junaid Saleem报告的代码段2中的错误