Ich habe eine Checkbox-Seite, die gestylt ist. Ich versuche, ihren Namen oder ID zurückzugeben, wenn sie geändert werden.Jquery kann die Checkbox-ID oder den Namen nicht finden
Ich habe hier eine Geige erstellt: https://jsfiddle.net/xpq8g13s/
, die das Problem zeigt. Die jquery, die ich verwende, ist:
Kann jemand beraten, warum das nicht funktioniert?
Dank
$(this).change(function() {... sucht das document Änderungsereignis, also, wenn Sie this später beziehen, es versucht, die name und id Attribute der document zu bekommen.
Verwenden Sie dieses Ereignis Bindung statt
$("#check").change(function() {
...
Probe
$(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> <b>This is my Text Label:</b>
</div>
<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>Danke - ich habe viele Checkboxen auf der Seite .. Wie kann ich dies verwenden, um mit denen jemals ausgewählt ist? – Tom
Sie würden einfach den Selektor ändern, um alle Checkboxen anzusteuern, sehen Sie sich mein aktualisiertes Beispiel an –
Danke, ich wäre gerade mit ähnlichem gekommen .. '$ (" input [name^= 'chk'] ")() { alert ($ (this) .attr ("name")); }); ' – Tom
Probieren Sie es wie folgt aus:
$(document).ready(function() {
$('.yourChkboxsClassName').change(function() {
alert($('.yourChkboxsClassName').attr("name"));
alert($('.yourChkboxsClassName').attr("id"));
});
});
Legen Sie einen eindeutigen Klassennamen für alle Ihre Kontrollkästchen fest und verwenden Sie diesen in Ihrem Code anstelle von IhremChkboxsClassName.
Mit
diese
Sie nur auf den Umfang beziehen, in denen Ihre Funktion definiert ist.
Das bezieht sich auf Dokument –