Jquery 找不到复选框 ID 或名称

Question

我有一页已设置样式的复选框。我正在尝试 return 他们的姓名或 ID 更改时。

我在这里创建了一个 fiddle： 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"));
});
});

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

与

this

你只是指你的函数定义的范围。

Jquery 找不到复选框 ID 或名称

Jquery not able to find checkbox ID or Name

checkbox

jquery

attr