目前在学js中,对js不是很熟悉,网上参考的例子搞的:
网上的例子
我自己的内容
html:
<label for="name">选服进行打补丁</label>
<div class="form-group">
<div id="list">
{% for server in serverlists %}
<label class="checkbox-inline">
<input type="checkbox" name="dbcheckbox" id="{{ server.serverId }}" value="{{ server.serverId }}">
{{ server.serverName }}
</label>
{% if loop.index%10 ==0 %}
<br>
{% endif %}
{% endfor %}
</div>
<br>
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
</div>
js的内容就是,参考例子中最下边“总结”里的那些,没改过。
执行的效果
第一次选择时:
取消掉,第二次再选择,就没打勾的了
但,点击“获取所选中的所有值”时,也能获取的数据
这是为咋的?
控制表单元素本身就存在的属性时用jquery的prop方法,想要弄明白,请度娘jquery 的prop和attr的区别吧?手机码字太难受了
attr换成prop这个可以吗?
通篇没有一个cache,滥用选择器
使用了1.10.2版本的jQuery还在使用attr操作property
脱裤子放屁的代码如下
if(this.checked){
$("#list :checkbox").attr("checked", true);
}else{
$("#list :checkbox").attr("checked", false);
}
明明一行搞定的玩意儿
$("#list :checkbox").attr("checked", this.checked);
这样的代码没有任何参考意义!我写的也仅供参考
$(function () {
var $all = $('#all');
var $selectAll = $('#selectAll');
var $unSelect = $('#unSelect');
var $reverseAll = $('#reverseAll');
var $getValue = $('#getValue');
var $list = $('#list');
var $items = $list.find(':checkbox');
$all.on('click', function () {
toggleAll(this.checked);
});
$selectAll.on('click', function () {
toggleAll(true);
});
$unSelect.on('click', function () {
toggleAll(false);
});
$reverseAll.on('click', function () {
var $checked = $items.filter(':checked');
var $notChecked = $items.filter(':not(:checked)');
$checked.prop('checked', false);
$notChecked.prop('checked', true);
$all.prop('checked', !$checked.length);
});
$items.on('click', function () {
$all.prop('checked', !$items.filter(':not(:checked)').length);
});
$getValue.on('click', function () {
var values = $items.filter(':checked')
.map(function () {
return $(this).val();
})
.get()
.join(',');
console.log(values);
});
function toggleAll(flag) {
$items.prop('checked', flag);
$all.prop('checked', flag);
}
});
checkbox类型的input标签,有个checked属性是绑定到元素自身的,即this.checked (jQuery.prop),而通过this.getAttribute('checked') (jQuery.attr)获取值是不准确的.