jQuery，如果选中复选框

小开

最佳答案

if ($('input.checkbox_check').is(':checked')) {

小开

jQuery 1.6或更高版本:

if ($('input.checkbox_check').prop('checked')) {
//blah blah
}

跨浏览器兼容的方式来确定一个复选框是否被选中是使用属性https://api.jquery.com/prop/

小开

$('#checkboxId').is(':checked')用于验证是否选中

,这个$("#checkboxId").prop('checked', true)检查

,这个$("#checkboxId").prop('checked', false)要取消检查

小开

下面是Attr |道具|是的主要区别:

来源:http://api.jquery.com/attr /

$( "input" )
.change(function() {
var $input = $( this );
$( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
})
.change();

p {
margin: 20px 0 0;
}
b {
color: blue;
}

<meta charset="utf-8">
<title>attr demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 

<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 



 

</body>
</html>

小开

如果上述方法都不管用，就像我的例子一样，试试这个:

  <script type="text/javascript">
$(function()
{
$('[name="my_checkbox"]').change(function()
{
if ($(this).is(':checked')) {
// Do something...
alert('You can rock now...');
};
});
});
</script>

小开

如果检查:

$( "SELECTOR" ).attr( "checked" )  // Returns ‘true’ if present on the element, returns undefined if not present
$( "SELECTOR" ).prop( "checked" ) // Returns true if checked, false if unchecked.
$( "SELECTOR" ).is( ":checked" ) // Returns true if checked, false if unchecked.

获取检查值:

$( "SELECTOR:checked" ).val()

获取检查值:

$( "SELECTOR:checked" ).length

检查或取消检查复选框

$( "SELECTOR" ).prop( "disabled", false );
$( "SELECTOR" ).prop( "checked", true );

小开

要检查输入并通过复选框确认，请使用此脚本…

 $(document).on("change", ".inputClass", function () {
if($(this).is(':checked')){
confirm_message = $(this).data('confirm');
var confirm_status = confirm(confirm_message);
if (confirm_status == true) {
//doing somethings...
}
}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label> check action </lable>
<input class="inputClass" type="checkbox" data-confirm="are u sure to do ...?" >

小开

jQuery/Javascript新手，尝试了上述解决方案。最终，这对我来说是有效的:

在加载页面时保持元素隐藏(因为默认情况下复选框=未选中)，然后
根据是否选中复选框来显示/隐藏元素。

这可能是一个丑陋的/多余的/无关的语法，但它现在工作!

注意:所有这些都在下面的<script>标记中，就在你的HTML页面上的</body>标记之前:

<script type="text/javascript">
// 'solution code' goes here...
</script>

“解决方案代码”:

    $(document).ready(function(){


// HIDE ELEMENTS UPON PAGE LOAD (CHECKBOX = UNCHECKED)
if ($([id="show_box"]).is(':checked') == false)
$("#hiddenDiv").hide();


// SHOW/HIDE ELEMENTS VIA CHECKBOX STATUS
$('[id="show_box"]').change(function()
{
if ($(this).is(':checked'))
$("#hiddenDiv").fadeIn();
else
$("#hiddenDiv").fadeOut();
});


});

[id =“show_box"] (id为'show_box'的复选框)
# hiddenDiv(我想要隐藏/显示的元素的id)
这(因为它是嵌套的，所以它最终表示'show_box')

这里是页面上的HTML代码，“解决方案代码”指的是:

<!-- CHECKBOX -->
<input type="checkbox" id="show_box" name="box" value="">


<!-- ELEMENT THAT SHOWS/HIDES -->
<div id="hiddenDiv"></div>

小开

你可以使用.is(':checked')方法，如果元素被选中，它会返回真正的，否则它会返回假。

工作示例

$('input').on('click', function(){
isChecked = $(this).is(':checked')
  

if(isChecked){
$('html').css('background-color','green')
}
else{
$('html').removeAttr('style')
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox"> Try me </label>

小开

我需要知道这个属性来自动选中/取消选中“子复选框”;这是有效的:

jQuery('.checkbox-parent').click(function(){
jQuery('.checkbox-child').prop(
'checked',
jQuery('.checkbox-parent').prop('checked')
);
});