[英]Checkbox checkall/uncheckall (Quick help)
我想要使用jquery或javascript選中/取消選中所有按鈕。 我嘗試使用網絡中可用的示例,但對我沒有任何幫助。
<li>
<span class="checkbox unchecked">
<label for="check1"></label>
<input type="checkbox" id="select" name="select">
</span>
</li>
這就是我將所有復選框放入包含某些信息的循環中的方式。 我從另一個jsp頁面調用了它,並將其放在另一個表單中。 我嘗試了可能的示例,但無法使用這些代碼。
請幫忙。
我已經嘗試過這個jQuery:
<script language="javascript">
$(function(){
$("#select").click(function () {
$('#check1').attr('checked', this.checked);
});
// if all checkbox are selected, check the select checkbox
// and viceversa
$("#check1").click(function(){
if($("#check1").length == $("#check1:checked").length) {
$("#select").attr("checked", "checked");
} else {
$("#select").removeAttr("checked");
}
});
});
</script>
我不允許更改此復選框的設計和CSS。
我認為您需要使用ID,請使用類,請將腳本放在頁面的頂部
<script>
$(document).ready(function(){
$(".check").click(function(){
if($(".checkall:checked").length<=0) {
$(".checkall").prop('checked', true);
} else {
$(".checkall").removeAttr("checked");
}
});
});
</script>
和HTML部分將是
<ul>
<li>
<span class="checkbox unchecked">
<label for="check1"></label>
<input type="checkbox" id="select" name="selectall" class="checkall">
</span>
</li>
<li>
<span class="checkbox unchecked">
<label for="check1"></label>
<input type="checkbox" id="select" name="selectall" class="checkall">
</span>
</li>
<li>
<span class="checkbox unchecked">
<label for="check1"></label>
<input type="checkbox" id="select" name="selectall" class="checkall">
</span>
</li>
</ul>
<input type="button" name="test" value="test" class='check'/>
<a rel="env" href="#select_all">Select All</a>
<a rel="env" href="#select_none">Select None</a>
<ul id="env">
<input type="checkbox"> data
<input type="checkbox"> data
</ul>
<script>
$("A[href='#select_all']").click( function() {
$("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', true);
return false;
});
$("A[href='#select_none']").click( function() {
$("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', false);
return false;
});
</script>
您的代碼中存在一些缺陷
1)選擇器錯誤$("#selectall").click(function () {
此操作選擇ID為selectall的輸入,但在您的情況下,沒有ID為selectall的元素
這應該做..
$("#select").click(function () { //this select the input with id select..which is selectall in your case..
2) $('#check1').attr('checked', this.checked);
這會找到ID為check1的復選框... 我猜在您的情況下是多個 ..因此,因為多個元素不能具有相同的ID ..請將其更改為class並調用
$('.check1').attr('checked', this.checked);
最終輸出..無需更改您的代碼
$(function(){
$("#select").click(function () {
$('.check1').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".check1").click(function(){
if($(".check1").length == $(".check1:checked").length) {
$("#select").attr("checked", "checked");
} else {
$("#select").removeAttr("checked");
}
});
});
您不能在頁面上為多個元素提供相同的ID。 嘗試將這些id
更改為class
:
我在這里做了一個小提琴: http : //jsfiddle.net/zqPXc/
<ul>
<li> <span class="checkbox unchecked">
<label for="selectall">selectall</label>
<input type="checkbox" name="select"/>
</span>
</li>
<li> <span class="checkbox unchecked">
<label for="check1"></label>
<input type="checkbox" class="check1" name="b"/>
</span>
</li>
<li> <span class="checkbox unchecked">
<label for="check1"></label>
<input type="checkbox" class="check1" name="b"/>
</span>
</li>
</ul>
$(document).on('click', '[name="select"]', function () {
$('.check1').prop('checked', ($('[name="select"]:checked').length) ? true : false);
});
$(document).on('click', ".check1", function () {
$('[name="select"]').prop("checked", ($('.check1:checked').length == $('.check1').length) ? true : false);
});
我已經寫了一篇有關使用jQuery here 博客鏈接切換復選框的博客文章 。
這些情況可能適用於您的情況。 我還注意到,您已經將自己的復選框命名為#checked1
,您可能希望將其更改為一個類,而不要使用多個復選框。
$(document).ready(function() {
/** Toggle child checkboxes based on the #selectall's checked state. */
$("#selectall").click(function() {
this.checked = !(this.checked == true);
var ischecked = !(this.checked == true);
/** Set the checkboxes. */
$("#grdWhatever input:checkbox").attr("checked", function() {
this.checked = ischecked;
});
});
});
假設您有一個主復選框#select
,它控制頁面上所有其他復選框的狀態:
$('#select').on('click', function(){
if(this.checked) $('input:checkbox').not($(this)).attr('checked', true);
else $('input:checkbox').not($(this)).attr('checked', false);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.