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

【问题标题】：Radio Input Check/Uncheck when clicked on label单击标签时选中/取消选中无线电输入
【发布时间】：2017-10-20 15:37:56
【问题描述】：

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

JS 只是为通过 php 加载的带有checked="checked" 的单选按钮添加类，并向 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>

【问题讨论】：

请更新我用缺少的 CSS 制作的 sn-p
你在找THIS
什么CSS？ @mplungjan
没有@Nimish，它已经通过单击单选按钮工作，但您在问题中看到预览，单选按钮被隐藏，因为我们必须让它看起来像一个按钮组，它不能使用标签...
所以你想隐藏单选按钮并让标签像那样工作？请编辑 sn-p 并包含 css

标签： javascript jquery html css

【解决方案1】：

你所拥有的都不是最佳的。

首先，您应该为您的输入提供一个类，以免您的所有输入都在范围内，但我们现在将忽略它，但会给它一个适当的类型并将其锚定到我添加的新 div 中，ID 不在原创。

不要删除或尝试添加选中的属性，它会在更改时自动发生，这样做会阻止重置它。如果需要，请改用.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>

【讨论】：

我认为您错过了重点，如果收音机已经被选中并通过标签，我希望在单击时取消选中它们。无论如何，@nimish 的解决方案效果很好！
您可能会更好地使用复选框而不是收音机，因为您有点反对这种类型，但我看到了您的要求点。
我添加了一个标签点击事件处理程序，请注意，如果您在标签上使用 'for= 而不是包装，则需要更改选择器以改为通过 id 获取关联的收音机。
现在您的解决方案运行良好，我注意到@nimish 代码中的另一个错误，但我猜您一直都很干净！非常感谢你帮我解决这个问题！！
为每一个添加一个类到相应的单选按钮，并限制被检查的这两个组中的每一个的总计数。您可以检查任一功能中的计数并禁用所有未检查的计数，直到未检查的低于您的阈值。始终允许取消检查，但仅在低于该点时才允许检查。即var favCheck = $('.my-favorite:checked').length >= myfavThreshhold; 然后使用该布尔值禁用该类的所有未检查，其他组相同。 $('.my-favorite:not(:checked)').prop("disabled",favCheck);

【解决方案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>

UPDATE ：如果您想在再次单击时取消选中单选按钮。检查下面的sn-p

$('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 报告的 sn-p 2 中的错误

【讨论】：

sn-p 编号 2 有一个小错误 :) 点击不感兴趣，然后点击我的收藏，然后再次点击不感兴趣，它不会检查
在点击事件中遍历 DOM 5 次并不是最好的选择。
这段代码没用——为什么$('input:not(:checked)').removeAttr("checked");如果一开始就没有检查就去掉检查？什么都不做。
@JunaidSaleem 我已经更新了 sn-p。如果您想确认是否可以检查收音机，请立即检查。删除 $('input[type=radio]').hide();并检查
是的。如果我以后需要帮助，我会告诉你的。 :)