如何根据选中或不选中的单选按钮交换按钮（使用jQuery）

问题描述 投票：0回答：4

我正在使用UI，用户将选择送货地址。该设计基本上使用单选按钮模式，其中检查的“卡”将是绿色，并且按钮将根据被检查的卡（单选按钮）而改变。

基本上，有一个带有主类的默认按钮，它显示“发送到此地址”，但是当卡被检查时，它应该更改为“选定地址”。这现在正在运作。我首先尝试使用“相同”按钮，但更改内部文本或html和类，但这不是很好。所以，现在我想根据单选按钮检查状态显示和隐藏按钮。

但是，我正在与兄弟姐妹，父母，孩子等一起度过难关 - 遍历DOM以获得我想要的效果。我想要的只是选中的卡片显示为绿色，带有“选定地址”按钮。如果选中其中一张卡，这甚至应该在页面加载上。而且，当我检查另一张卡时，“取消选中”所有其他卡并将该按钮恢复为“发送到此地址”按钮。

我做了一个JS小提琴来展示我的意思：https://jsfiddle.net/gamehendgeVA/b98v65tx/3/

这是我正在尝试的JS：

 jQuery(".selectedAddressButton").hide();

  jQuery(function () {
     jQuery(".addressRadio").change(function() {
    if (jQuery(this).is(":checked")) {
        jQuery(this).siblings().find(".selectedAddressButton").show();
        jQuery(this).siblings().find(".deliverButton").hide();
    } else {
        jQuery(this).siblings().find(".selectedAddressButton").hide();
        jQuery(this).parents().find(".deliverButton").show();
    }
 });
});

（由于一些奇怪的工作文件，我不得不在$的位置使用“jQuery”来使事情发挥作用，并不完全确定原因。）

还有一个单选按钮"cards"的片段：

<label class="fullWidth">
        <input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address1" value="address1">
        <div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
            <div class="addressField">John Doe</div>
            <div class="addressField">123 Anytown St.</div>
            <div class="addressField">Springfield, MD 22365</div>
            <div class="row">
                <div class="col-md-12 text-left">
                    <div class="deliverButton" style="margin-top:12px;">
                        <div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
                    </div>
                    <div class="selectedAddressButton" style="margin-top:12px;">
                        <div style="margin-top:12px;">
                            <div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-left =" style="margin-top:15px;">
                    <button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
                    <button type="button" class="btn btn-secondary-custom">Delete</button>
                </div>
            </div>
        </div>
</label>

我想转向专家，看看我是否走在正确的道路上 - 也许有一种更简单的方法可以完成我想做的事情。

感谢任何帮助！谢谢！

javascript jquery twitter-bootstrap-3
4个回答
2
投票

下面的代码段可以按照您的意愿行事。

我已经编写了额外的几行CSS并使用jquery将.selected类添加到周围的标签中。如果还取消选择以前选择的卡，则可以在单个页面上与多个无线电组一起使用。

jquery已在下面完整评论。

如果你想要别的东西，请告诉我。

新的CSS

label .selectedAddressButton, label.selected .deliverButton {
  display: none;
}

label.selected .selectedAddressButton, label .deliverButton {
  display: inherit;
}

Demo

// Add change event for you radio button class
$(".addressRadio").change(function() {

  // Check the radio button group name
  // So you can have multiple radio groups on a single page
  radioGroup = $(this).attr("name");

  // Cycle through each of the associated radio buttons
  $("input[type='radio'][name='" + radioGroup + "']").each(function() {
  
    // Remove any selected classes from the wrapping label
    $(this).closest("label").removeClass("selected");

  });

  // Check if the changed radio button has been selected 
  if ($(this).is(":checked")) {

    // Add the selected class if it has
    $(this).closest("label").addClass("selected");

  }

});
label.fullWidth {
  width: 100%;
  font-size: 1rem;
}

.card-input-element+.card {
  /*height: calc(36px + 2*1rem);*/
  color: #005499;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 2px solid transparent;
  border-radius: 4px;
  border: 2px solid #ccc;
}

.card-input-element+.card:hover {
  cursor: pointer;
  background-color: #eee;
  border: 2px solid #005499;
}

.card-input-element:checked+.card {
  border: 2px solid #c3e6cb;
  background-color: #d4edda;
  -webkit-transition: border .3s;
  -o-transition: border .3s;
  transition: border .3s;
  content: '\f00c';
  color: #0e6d2e;
  font-family: 'FontAwesome';
  font-size: 24px;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.card-input-element:checked+.card::after {
  content: '\f00c';
  color: #0e6d2e;
  font-family: 'FontAwesome';
  font-size: 24px;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 0;
  right: 5px;
}

@-webkit-keyframes fadeInCheckbox {
  from {
    opacity: 0;
    -webkit-transform: rotateZ(-20deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
  }
}

@keyframes fadeInCheckbox {
  from {
    opacity: 0;
    transform: rotateZ(-20deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}

.addressField {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  margin-bottom: 5px;
}

.radioCard {
  padding: 20px;
  margin: 6px 0;
  position: relative;
}

.radioCard:hover {
  background-color: #eee;
  cursor: pointer;
}


/* note: the position relative goes with the position absolute on the ::after to get the checkmark in the top-right of the div */


/* hiding actual radio button away from screen */

input[type="checkbox"].hideOffScreen,
input[type="radio"].hideOffScreen {
  position: absolute;
  margin-left: -9999px;
}

.btn-success-custom {
  font-family: "ProximaNova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: #28a745;
  color: #fff;
  border-radius: 3px;
  padding-top: 9px;
  min-height: 38px;
  transition: background 0.5s ease 0s;
  -webkit-transition: background 0.5s ease 0s;
  -moz-transition: background 0.5s ease 0s;
  -ms-transition: background 0.5s ease 0s;
}

.btn-success-custom:hover,
.btn-success-custom:focus,
.btn-success-custom:active,
.btn-success-custom.active,
.open .dropdown-toggle.btn-success-custom {
  background-color: #218838;
  color: #fff;
}

.btn-success-custom:active,
.open .dropdown-toggle.btn-success-custom {
  background-image: none;
}

label .selectedAddressButton,
label.selected .deliverButton {
  display: none;
}

label.selected .selectedAddressButton,
label .deliverButton {
  display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div>Is the address you'd like to use displayed below? If so, select the corresponding box below. Or, you can <a>enter a different address</a>.</div>
    <div class="radioPanel">
      <label class="fullWidth">
<input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address1" value="address1">
<div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
<div class="addressField">John Doe</div>
<div class="addressField">123 Anytown St.</div>
<div class="addressField">Springfield, MD 22365</div>
<div class="row">
<div class="col-md-12 text-left">
<div class="deliverButton" style="margin-top:12px;">
<div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
</div>
<div class="selectedAddressButton" style="margin-top:12px;">
<div style="margin-top:12px;"><div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div></div>
</div> 
</div>
</div>
<div class="row">
<div class="col-md-12 text-left =" style="margin-top:15px;">  
<button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
<button type="button" class="btn btn-secondary-custom">Delete</button>   
</div>
</div>
</div>
</label>
      <label class="fullWidth" style="margin-top:10px;">
<input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address2" value="address2">
<div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
<div class="addressField">Sally Smith</div>
<div class="addressField">555 Elm St.</div>
<div class="addressField">Nantucket, CA 55698</div>
<div class="row">
<div class="col-md-12 text-left">
<div class="deliverButton" style="margin-top:12px;">
<div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
</div>
<div class="selectedAddressButton" style="margin-top:12px;">
<div style="margin-top:12px;"><div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div></div>
</div> 
</div>
</div>
<div class="row">
<div class="col-md-12 text-left =" style="margin-top:15px;">  
<button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
<button type="button" class="btn btn-secondary-custom">Delete</button>   
</div>
</div>
</div>
</label>
    </div>
    <!-- /.radioPanel -->
  </div>
</div>
1
投票

接受的答案是好的。只是想添加一些实现相同结果的变体/替代方案，使用更少的代码和更简单的方法：

在selected元素的父元素上添加/删除.addressRadio类，该元素对应于此单选按钮的:checked状态。

$('.addressRadio').change(function() {
  $(this)
    .closest('label.fullWidth')
    .toggleClass('selected', this.checked);

  $('.addressRadio')
    .not(this)
    .closest('label.fullWidth.selected')
    .removeClass('selected');
});

甚至更简单，使用自定义插件（请参阅下面的演示代码中的.toggleClassUnique()的实现）。除非您在整个应用程序中需要可重用的功能，否则可能不是特别有用，但无论如何它都是：

$('.addressRadio').change(function() {
  $(this)
    .closest('label.fullWidth')
    .toggleClassUnique('selected', this.checked);
});

因此，这个额外的类将用于确定它的“目标”儿童（.selectedAddressButton和.deliverButton）是否要隐藏或显示。

CSS

.fullWidth .selectedAddressButton {
  display: none;
}

.fullWidth.selected .selectedAddressButton {
  display: block;
}

.fullWidth.selected .deliverButton {
  display: none;
}

这也将.selectedAddressButton的初始可见性设置为“隐藏”，或技术上display: none，因此您不应该为此需要Javascript。

最后但同样重要的是，请查看jQuery.noConflict()，了解jQuery别名问题的可能修复方法。

许多JavaScript库使用$作为函数或变量名，就像jQuery一样。在jQuery的情况下，$只是jQuery的别名，因此所有功能都可以在不使用$的情况下使用。如果你需要在jQuery旁边使用另一个JavaScript库，那么通过调用$.noConflict()将$的控制权返回给另一个库。在jQuery初始化期间保存$的旧引用; noConflict()只是恢复他们。

或者只是在函数范围内传递对全局jQuery对象的引用：

(function ($) {

  $(function() {
    // More code using $ as alias to jQuery
  });

})(jQuery);

您通常会将它添加到JS文件的最顶层，然后所有需要jQuery的代码都应该放在这个包装器中。

Full working demo

(function($) {

  $('.addressRadio').change(function() {
    $(this)
      .closest('label.fullWidth')
      .toggleClass('selected', this.checked);
      
    $('.addressRadio')
      .not(this)
      .closest('label.fullWidth.selected')
      .removeClass('selected');
  });
  
})(window.jQuery);
.fullWidth .selectedAddressButton {
  display: none;
}

.fullWidth.selected .selectedAddressButton {
  display: block;
}

.fullWidth.selected .deliverButton {
  display: none;
}

label.fullWidth {
  width: 100%;
  font-size: 1rem;
}

.card-input-element+.card {
  /*height: calc(36px + 2*1rem);*/
  color: #005499;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 2px solid transparent;
  border-radius: 4px;
  border: 2px solid #ccc;
}

.card-input-element+.card:hover {
  cursor: pointer;
  background-color: #eee;
  border: 2px solid #005499;
}

.card-input-element:checked+.card {
  border: 2px solid #c3e6cb;
  background-color: #d4edda;
  -webkit-transition: border .3s;
  -o-transition: border .3s;
  transition: border .3s;
  content: '\f00c';
  color: #0e6d2e;
  font-family: 'FontAwesome';
  font-size: 24px;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.card-input-element:checked+.card::after {
  content: '\f00c';
  color: #0e6d2e;
  font-family: 'FontAwesome';
  font-size: 24px;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 0;
  right: 5px;
}

@-webkit-keyframes fadeInCheckbox {
  from {
    opacity: 0;
    -webkit-transform: rotateZ(-20deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
  }
}

@keyframes fadeInCheckbox {
  from {
    opacity: 0;
    transform: rotateZ(-20deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}

.addressField {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  margin-bottom: 5px;
}

.radioCard {
  padding: 20px;
  margin: 6px 0;
  position: relative;
}

.radioCard:hover {
  background-color: #eee;
  cursor: pointer;
}


/* note: the position relative goes with the position absolute on the ::after to get the checkmark in the top-right of the div */


/* hiding actual radio button away from screen */

input[type="checkbox"].hideOffScreen,
input[type="radio"].hideOffScreen {
  position: absolute;
  margin-left: -9999px;
}

.btn-success-custom {
  font-family: "ProximaNova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: #28a745;
  color: #fff;
  border-radius: 3px;
  padding-top: 9px;
  min-height: 38px;
  transition: background 0.5s ease 0s;
  -webkit-transition: background 0.5s ease 0s;
  -moz-transition: background 0.5s ease 0s;
  -ms-transition: background 0.5s ease 0s;
}

.btn-success-custom:hover,
.btn-success-custom:focus,
.btn-success-custom:active,
.btn-success-custom.active,
.open .dropdown-toggle.btn-success-custom {
  background-color: #218838;
  color: #fff;
}

.btn-success-custom:active,
.open .dropdown-toggle.btn-success-custom {
  background-image: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="row">
   <div class="col-md-12">
      <div>Is the address you'd like to use displayed below? If so, select the corresponding box below. Or, you can <a>enter a different address</a>.</div>
      <div class="radioPanel">
         <label class="fullWidth">
            <input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address1" value="address1">
            <div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
               <div class="addressField">John Doe</div>
               <div class="addressField">123 Anytown St.</div>
               <div class="addressField">Springfield, MD 22365</div>
               <div class="row">
                  <div class="col-md-12 text-left">
                     <div class="deliverButton" style="margin-top:12px;">
                        <div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
                     </div>
                     <div class="selectedAddressButton" style="margin-top:12px;">
                        <div style="margin-top:12px;">
                           <div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12 text-left =" style="margin-top:15px;">  
                     <button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
                     <button type="button" class="btn btn-secondary-custom">Delete</button>   
                  </div>
               </div>
            </div>
         </label>
         <label class="fullWidth" style="margin-top:10px;">
            <input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address2" value="address2">
            <div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
               <div class="addressField">Sally Smith</div>
               <div class="addressField">555 Elm St.</div>
               <div class="addressField">Nantucket, CA 55698</div>
               <div class="row">
                  <div class="col-md-12 text-left">
                     <div class="deliverButton" style="margin-top:12px;">
                        <div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
                     </div>
                     <div class="selectedAddressButton" style="margin-top:12px;">
                        <div style="margin-top:12px;">
                           <div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12 text-left =" style="margin-top:15px;">  
                     <button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
                     <button type="button" class="btn btn-secondary-custom">Delete</button>   
                  </div>
               </div>
            </div>
         </label>
      </div>
      <!-- /.radioPanel -->
   </div>
</div>

With custom jQuery plugin

(function($) {

  $('.addressRadio').change(function() {
    $(this)
      .closest('label.fullWidth')
      .toggleClassUnique('selected', this.checked);
  });
  
  
  // Custom plugin
  $.fn.toggleClassUnique = function (className, state) {
    this
      .toggleClass(className, state)
      .siblings()
      .removeClass(className);
      
    return this;
  };
  
})(window.jQuery);
.fullWidth .selectedAddressButton {
  display: none;
}

.fullWidth.selected .selectedAddressButton {
  display: block;
}

.fullWidth.selected .deliverButton {
  display: none;
}

label.fullWidth {
  width: 100%;
  font-size: 1rem;
}

.card-input-element+.card {
  /*height: calc(36px + 2*1rem);*/
  color: #005499;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 2px solid transparent;
  border-radius: 4px;
  border: 2px solid #ccc;
}

.card-input-element+.card:hover {
  cursor: pointer;
  background-color: #eee;
  border: 2px solid #005499;
}

.card-input-element:checked+.card {
  border: 2px solid #c3e6cb;
  background-color: #d4edda;
  -webkit-transition: border .3s;
  -o-transition: border .3s;
  transition: border .3s;
  content: '\f00c';
  color: #0e6d2e;
  font-family: 'FontAwesome';
  font-size: 24px;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.card-input-element:checked+.card::after {
  content: '\f00c';
  color: #0e6d2e;
  font-family: 'FontAwesome';
  font-size: 24px;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 0;
  right: 5px;
}

@-webkit-keyframes fadeInCheckbox {
  from {
    opacity: 0;
    -webkit-transform: rotateZ(-20deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
  }
}

@keyframes fadeInCheckbox {
  from {
    opacity: 0;
    transform: rotateZ(-20deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}

.addressField {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  margin-bottom: 5px;
}

.radioCard {
  padding: 20px;
  margin: 6px 0;
  position: relative;
}

.radioCard:hover {
  background-color: #eee;
  cursor: pointer;
}


/* note: the position relative goes with the position absolute on the ::after to get the checkmark in the top-right of the div */


/* hiding actual radio button away from screen */

input[type="checkbox"].hideOffScreen,
input[type="radio"].hideOffScreen {
  position: absolute;
  margin-left: -9999px;
}

.btn-success-custom {
  font-family: "ProximaNova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: #28a745;
  color: #fff;
  border-radius: 3px;
  padding-top: 9px;
  min-height: 38px;
  transition: background 0.5s ease 0s;
  -webkit-transition: background 0.5s ease 0s;
  -moz-transition: background 0.5s ease 0s;
  -ms-transition: background 0.5s ease 0s;
}

.btn-success-custom:hover,
.btn-success-custom:focus,
.btn-success-custom:active,
.btn-success-custom.active,
.open .dropdown-toggle.btn-success-custom {
  background-color: #218838;
  color: #fff;
}

.btn-success-custom:active,
.open .dropdown-toggle.btn-success-custom {
  background-image: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="row">
   <div class="col-md-12">
      <div>Is the address you'd like to use displayed below? If so, select the corresponding box below. Or, you can <a>enter a different address</a>.</div>
      <div class="radioPanel">
         <label class="fullWidth">
            <input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address1" value="address1">
            <div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
               <div class="addressField">John Doe</div>
               <div class="addressField">123 Anytown St.</div>
               <div class="addressField">Springfield, MD 22365</div>
               <div class="row">
                  <div class="col-md-12 text-left">
                     <div class="deliverButton" style="margin-top:12px;">
                        <div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
                     </div>
                     <div class="selectedAddressButton" style="margin-top:12px;">
                        <div style="margin-top:12px;">
                           <div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12 text-left =" style="margin-top:15px;">  
                     <button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
                     <button type="button" class="btn btn-secondary-custom">Delete</button>   
                  </div>
               </div>
            </div>
         </label>
         <label class="fullWidth" style="margin-top:10px;">
            <input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address2" value="address2">
            <div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
               <div class="addressField">Sally Smith</div>
               <div class="addressField">555 Elm St.</div>
               <div class="addressField">Nantucket, CA 55698</div>
               <div class="row">
                  <div class="col-md-12 text-left">
                     <div class="deliverButton" style="margin-top:12px;">
                        <div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
                     </div>
                     <div class="selectedAddressButton" style="margin-top:12px;">
                        <div style="margin-top:12px;">
                           <div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12 text-left =" style="margin-top:15px;">  
                     <button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
                     <button type="button" class="btn btn-secondary-custom">Delete</button>   
                  </div>
               </div>
            </div>
         </label>
      </div>
      <!-- /.radioPanel -->
   </div>
</div>

附：如果您有兴趣创建自己的，请参阅how to create a basic plugin。

0
投票

简化它的一种方法是使用“切换”方法。

jQuery(".selectedAddressButton").hide();

jQuery(function () {
    jQuery(".addressRadio").change(function() {   
        jQuery(this).siblings().find(".selectedAddressButton").toggle();
        jQuery(this).siblings().find(".deliverButton").toggle();
    }
});

切换不需要您知道以前的状态。这样您甚至不需要知道是否选中了复选框。

0
投票

选中任何复选框时应设置默认视图，请尝试以下代码：

jQuery(function () {
    jQuery(".addressRadio").change(function() {
        if (jQuery(this).is(":checked")) {
            jQuery(document).find(".selectedAddressButton").hide(); // To hide all select buttons
            jQuery(document).find(".deliverButton").show(); //To show all deliver button                 
            jQuery(this).siblings().find(".selectedAddressButton").show();
            jQuery(this).siblings().find(".deliverButton").hide();
        } else {
            jQuery(this).siblings().find(".selectedAddressButton").hide();
            jQuery(this).parents().find(".deliverButton").show();
        }
    });

希望它能帮到你。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.