Question

我试图确定单击该组时单选按钮组中选择了哪个单选按钮。我的标记和CSS是为这个特定的单选按钮定制的，我认为这可能会导致我的点击事件出现问题。我在javascript中有一些条件逻辑，其中两个警报都出现在点击上。任何人都知道如何纠正这个问题？

以下是此问题的Fiddle。

标记

    userEmailTextField.rightViewMode = UITextFieldViewMode.always
    let imageView = UIImageView.init(frame: CGRect(x: 0, y: 0, width: 20, height: 20))

    usernameTextField.rightView?.frame = AppManager.shared.CGRectMake(0, 0, 25, 20)

    var imageName:String = ""
    if jsonReturned["errorCode"] == "Success" {
        imageName = "isAcceptedIcon"
    } else {
        imageName = "isRejectedIcon"
    }

    let image = UIImage(named: imageName)
    imageView.image = image
    imageView.contentMode = .scaleAspectFit

    usernameTextField.rightView?.addSubview(imageView)

JS

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="toggle" id="family-radio-btn">
        <input type="radio" class="toggle-input" name="family" id="family-yes" checked>
        <label for="family-yes" class="toggle-label toggle-label-off">Yes</label>
        <input type="radio" class="toggle-input" name="family" id="family-no">
        <label for="family-no" class="toggle-label toggle-label-on">No</label>
        <span class="toggle-selection"></span>
      </div>
    </div>
  </div>
</div>

CSS

$('#family-radio-btn').click(function () {
    if ($('#family-yes:checked').length) {
        alert("yes");
    }
    else
    {
        alert("no");
    }
});

Answer 1

    $('input[type="radio"]').click(function (e) {
        if ($('#family-yes:checked').length) {
            console.log("yes");
        }
        else
        {
            console.log("no");
        }
        
    });

.toggle {
  position: relative;
  height: 34px;
  width: 100%;
  margin: 0;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 3px;
}
.toggle .toggle-input {
  display: none;
}
.toggle .toggle-input:checked + .toggle-label {
  color: #ffffff;
}
.toggle .toggle-input:checked + .toggle-label-on ~ .toggle-selection {
  left: 49%;
}
.toggle .toggle-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 50%;
  line-height: 32px;
  color: #555555;
  text-align: center;
  font-weight: normal;
  cursor: pointer;
}
.toggle .toggle-label.toggle-label-off {
  padding-left: 2px;
}
.toggle .toggle-label.toggle-label-on {
  padding-right: 2px;
}
.toggle .toggle-selection {
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  display: block;
  width: 50%;
  height: 28px;
  border-radius: 3px;
  background-color: #0071bc;
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -ms-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="toggle" id="family-radio-btn">
        <input type="radio" class="toggle-input" name="family" id="family-yes" checked>
        <label for="family-yes"  class="toggle-label toggle-label-off">Yes</label>
        <input type="radio" class="toggle-input" name="family" id="family-no">
        <label for="family-no" class="toggle-label toggle-label-on">No</label>
        <span class="toggle-selection"></span>
      </div>
    </div>
  </div>
</div>

Answer 2

您遇到事件冒泡问题。点击标签会产生两次点击：一次在标签上，另一次在输入上。

我建议您在javascript中使用此更改来处理单选按钮：

$('input[name="family"]').click(function() {
  if($(this).attr('checked')) {
    console.log('yes');
  } else {
    console.log('no');
  }
});

祝你好运

Answer 3

您在父div上使用包含单选按钮yes和no的click事件。因此，当您单击任何按钮时，它将触发点击事件两次，一次用于标签，一次用于输入。

所以你只需要在输入无线电上绑定click事件。

试试这个：

＆＃13;

$(function(){

    $('.toggle-input').click(function () {
       // e.preventDefault();
        if ($('#family-yes').is(":checked")) {
            alert("yes");
        }
        else
        {
            alert("no");
        }
    });
});

＆＃13;

.toggle {
  position: relative;
  height: 34px;
  width: 100%;
  margin: 0;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 3px;
}
.toggle .toggle-input {
  display: none;
}
.toggle .toggle-input:checked + .toggle-label {
  color: #ffffff;
}
.toggle .toggle-input:checked + .toggle-label-on ~ .toggle-selection {
  left: 49%;
}
.toggle .toggle-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 50%;
  line-height: 32px;
  color: #555555;
  text-align: center;
  font-weight: normal;
  cursor: pointer;
}
.toggle .toggle-label.toggle-label-off {
  padding-left: 2px;
}
.toggle .toggle-label.toggle-label-on {
  padding-right: 2px;
}
.toggle .toggle-selection {
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  display: block;
  width: 50%;
  height: 28px;
  border-radius: 3px;
  background-color: #0071bc;
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -ms-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="toggle" id="family-radio-btn">
        <input type="radio" class="toggle-input" name="family" id="family-yes" checked>
        <label for="family-yes" class="toggle-label toggle-label-off">Yes</label>
        <input type="radio" class="toggle-input" name="family" id="family-no">
        <label for="family-no" class="toggle-label toggle-label-on">No</label>
        <span class="toggle-selection"></span>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

尝试使用它：

$('#family-radio-btn').click(function () {
    if ($('#family-yes').is(":checked")) {
        alert("yes");
    }
    else
    {
        alert("no");
    }
});

确定选择了哪个单选按钮 - 自定义单选按钮标记

4 个答案: