Answers:
要获取Value属性的值,您可以执行以下操作:
$("input[type='checkbox']").val();
或者,如果您为其设置了class
或id
,则可以:
$('#check_id').val();
$('.check_class').val();
但是,无论是否检查,它都会返回相同的值,这可能会造成混淆,因为它与提交的表单行为不同。
要检查是否已检查,请执行以下操作:
if ($('#check_id').is(":checked"))
{
// it is checked
}
$($0).val()
在Chrome浏览器中尝试并取消选中该复选框,则即使未选中该答案,它的答案也仍然是“打开”。但是$($0).is(":checked")
返回正确的值。
$('#check_id').val();
以$('#check_id').is(":checked");
返回值true或false。
这两种方式有效:
$('#checkbox').prop('checked')
$('#checkbox').is(':checked')
(谢谢@mgsloan)$('#test').click(function() {
alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />
试试这个小解决方案:
$("#some_id").attr("checked") ? 1 : 0;
要么
$("#some_id").attr("checked") || 0;
检索复选框值的唯一正确方法如下
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
如jQuery网站上的官方文档所述。其余方法与复选框的属性无关,它们正在检查属性,这意味着它们正在测试复选框在加载时的初始状态。简而言之:
elem.checked
),或者$(elem).prop("checked")
如果您想依赖jQuery,也可以使用它。$(elem).is(":checked")
。答案有误导性,请检查以下内容:
.is(":checked")
并使用.prop(":checked")
jQuery 1.10.0为我使用相同功能
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
jQuery(".checkboxClass").click(function(){
var selectedCountry = new Array();
var n = jQuery(".checkboxClass:checked").length;
if (n > 0){
jQuery(".checkboxClass:checked").each(function(){
selectedCountry.push($(this).val());
});
}
alert(selectedCountry);
});
//By each()
var testval = [];
$('.hobbies_class:checked').each(function() {
testval.push($(this).val());
});
//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");
//HTML Code
<input type="checkbox" value="cricket" name="hobbies[]" class="hobbies_class">Cricket
<input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey
示例
演示
尽管这个问题要求使用jQuery解决方案,但这是一个纯JavaScript的答案,因为没有人提及它。
只需选择元素并访问checked
属性(将返回布尔值)。
var checkbox = document.querySelector('input[type="checkbox"]');
alert(checkbox.checked);
<input type="checkbox"/>
这是一个监听change
事件的简单示例:
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
alert(this.checked);
});
<input type="checkbox"/>
要选择选中的元素,请使用:checked
伪类(input[type="checkbox"]:checked
)。
这是一个遍历选中input
元素并返回选中元素名称的映射数组的示例。
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
return el.name;
});
console.log(checkedElements);
checked
可以在本机DOM元素上方便地访问该属性时,在这种琐碎的情况下可以避免使用jQuery 。一些搜索此类问题/答案的人通常并不了解jQuery有时不是必需的事实。换句话说,头脑狭窄的人不是这个答案的目标人群。
在以下位置获取选中的checkboxex的值jquery
:
var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.
for(var i=0; i<checks.length; i++){
console.log($(checks[i]).val()); // or do what you want
});
在pure js
:
var checks = document.querySelectorAll("input[type='checkbox']:checked");
for(var i=0; i<checks.length; i++){
console.log(checks[i].value); // or do what you want
});
最好的方法是 $('input[name="line"]:checked').val()
而且您还可以选择文本 $('input[name="line"]:checked').text()
将值属性和名称添加到单选按钮输入中。确保所有输入都具有相同的名称属性。
<div class="col-8 m-radio-inline">
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="1" checked> Value Text 1
</label>
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="2"> Value Text 2
</label>
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="3"> Value Text 3
</label>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.laravel').click(function(){
var val = $(this).is(":checked");
$('#category').submit();
});
});
<form action="{{route('directory')}}" method="post" id="category">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input name="category" value="{{$name->id}}" class="laravel" type="checkbox">{{$name->name}}
</form>
由于多年来的api变化,请注意,截止到2018年今天。removeAttr已被删除,不再可用!
jQuery选中或取消选中复选框:
不好,不能再工作了。
$('#add_user_certificate_checkbox').removeAttr("checked");
$('#add_user_certificate_checkbox').attr("checked","checked");
相反,您应该这样做:
$('#add_user_certificate_checkbox').prop('checked', true);
$('#add_user_certificate_checkbox').prop('checked', false);
$("input:checkbox")
。此外,类选择器中似乎还有一个错字...