Question

我有一个样式的复选框页面。我正在尝试在更改时返回他们的名字或ID。

我在这里创造了一个小提琴： https://jsfiddle.net/xpq8g13s/

这表明了这个问题。我正在使用的jquery是：

$(document).ready(function() {
    $(this).change(function() {
        alert($(this).attr("name"));
        alert($(this).attr("id"));
    });
});

有人可以建议为什么这不起作用吗？

由于

Answer 1

$(this).change(function() {...正在寻找document更改事件，因此当您稍后引用this时，它会尝试获取name和id document的属性。

使用此事件绑定

$("#check").change(function() {
  ...

样品

$(document).ready(function() {
  $("input[type='checkbox']").change(function() {
    alert($(this).attr("name"));
    alert($(this).attr("id"));
  });
});

.switch {
  position: relative;
  display: inline-block;
  width: 53px;
  height: 19px
}
.switch input {
  display: none
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s
}
.slider:before {
  position: absolute;
  content: "";
  height: 11px;
  width: 19px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  -webkit-transition: .4s;
  transition: .4s
}
input:checked+.slider {
  background-color: #008c00
}
input:focus+.slider {
  box-shadow: 0 0 1px #2196F3
}
input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px)
}
input,
select,
textarea {
  border: 1px solid #A0A0A0;
  background: #FFF;
  padding: 3px 4px;
  color: #222;
  margin: 2px 5px 2px 0px;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' class='tooltip' title='tooltip text.'>
  <img src='images/tooltip.png'>
</a>&nbsp;<b>This is my Text Label:</b>
</div>&nbsp;

<label class="switch">
  <input type="checkbox" name='check' id='check' title='checkbox' value="1">
  <div class="slider"></div>
</label>

<br/>
<input type="text" id="textinput" name="textinput" size="40" maxlength="40" autocomplete="off" placeholder="enter text here" value="" tabindex='1' disabled/>
</div>
<br/>

<label class="switch">
  <input type="checkbox" name='check2' id='check2' title='checkbox' value="1">
  <div class="slider"></div>
</label>

Answer 2

尝试这样：

$(document).ready(function() {
$('.yourChkboxsClassName').change(function() {
    alert($('.yourChkboxsClassName').attr("name"));
    alert($('.yourChkboxsClassName').attr("id"));
});
});

为所有复选框设置一个唯一的类名，并在代码中使用该名称而不是您的ChkboxsClassName。

用

此

您只需参考定义函数的范围。

Jquery无法找到复选框ID或名称

2 个答案: