点击标签

Question

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

JS只是通过带有checked =“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

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

首先你应该给你的输入一个类，以便不在范围内获得所有输入，但是我们现在将忽略它但是会给它一个正确的类型并将它锚定到一个新的div我添加了ID不在原始

不要删除或尝试添加checked属性，它会在更改时自动发生，并且这样做会阻止重置它。如果需要，请使用.prop()。

您需要的一个问题是，您需要找到已更改并设置的收音机的兄弟姐妹 - 他们将＆＃34;取消/更改＆＃34; - 无线电是一组中的一个但是改变事件不会触发＆＃34;未设置＆＃34;案件以这种方式挂钩。你可以给他们所有的课程并锚定，但我在标记中提供了一个没有额外的解决方案。

不要使用点击事件，使用更改，（如果通过脚本更改会怎么样？）

＆＃13;

＆＃13;

$('#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');

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

检查它是否有效。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

$('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");
});

＆＃13;

＆＃13;

＆＃13;

更新：如果您想再取消选中单选按钮。请查看以下代码段

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

data.table

＆＃13;

＆＃13;

＆＃13;

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