반응형
확인란이 선택되어 있는지 여부를 jQuery
아래에 동일한 tr의 확인란이 선택된 경우에만 트리거하려는 기능이 있습니다.제가 무엇을 잘못하고 있는지 알려주세요, 일반적인 방법이 작동하지 않습니다.감사해요.
제이에스
$(".add_menu_item_table").live('click', function() {
var value_td = $(this).parents('tr').find('td.td_name').text();
if ($('input.checkbox_check').attr(':checked')); {
var newDiv = $('<div class="div_menu_button"></div>');
var showDiv = $('<div id="show' + "0" + numShow++ + '" class="menu_button_info hidden"></div>');
var toggleTrigger = $('<a id="toggleshow' + "0" + numToggle++ + '" data-target="#show' + "0" + numTarget++ + '" class="toggle_trigger actions"> </a><div style="padding:5px"></div>');
var menuForm = $('<form id="menu_edit_form' + "0" + numForm++ + '" class="menu_creation_form"></form>');
$('#created_buttons_list').append(
newDiv.text(value_td)
);
newDiv.wrap("<li></li>");
newDiv.append(toggleTrigger);
newDiv.append(showDiv);
showDiv.append(menuForm);
menuForm.html('<label for="navigation_label">Navigation Label</label><input id="navigation_label' + "0" + numLabelone++ + '" type="text" placeholder="Navigation Label" name="navigation_label"><label for="attribute">Attribute</label><input id="attribute' + "0" + numLabeltwo++ + '" type="text" type="text" placeholder="Attribute" name="attribute"><label for="url">URL</label><input id="url' + "0" + numLabelthree++ + '" type="text" type="text" placeholder="URL" name="url"><input type="button" value="Remove" class="button_link remove_button"> <input type="reset" value="Cancel" class="button_link">');
}
});
var numToggle = 0;
var numShow = 0;
var numTarget = 0;
var numForm = 0;
var numLabelone = 0;
var numLabeltwo = 0;
var numLabelthree = 0;
<table width="316px" border="0" cellspacing="0" cellpadding="0" id="table-data">
<tbody>
<tr>
<td width="20px"><input type="checkbox" style="width:20px;" value="1" name="checkbox"></td>
<td width="200px"><a href="/admin/feedbackmanager/sortby/2/sortdesc/0">Page Name</a></td>
<td width="20px"><a href="/admin/feedbackmanager/sortby/3/sortdesc/0">Add</a></td>
</tr>
<tr>
<td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td>
<td class="td_name">Timeplot</td>
<td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td>
</tr>
<tr>
<td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td>
<td class="td_name">Operations Manuals</td>
<td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td>
</tr>
</tbody>
</table>
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)선택 취소
제 경우처럼 위의 솔루션 중 어떤 이유로도 작동하지 않는 경우 다음을 시도해 보십시오.
<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 );
아래 ATTR | PROP | IS의 주요 차이점을 참조하십시오.
출처: 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>사용할 수 있습니다..is(':checked')요소를 선택하면 true를 반환하고, 그렇지 않으면 false를 반환하는 메서드입니다.
예
$('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/Javascript에 새로 추가되어 위의 솔루션을 사용해 보았습니다.결국, 이것이 제게 도움이 되었습니다.
- 페이지를 로드할 때 요소를 숨깁니다(기본적으로 확인란 = 선택 해제되어 있기 때문).
- 확인란의 선택 여부에 따라 요소를 표시/숨깁니다.
그것은 아마도 구문적으로 약간 추악한/중복적인/외래적인 것이겠지만, 현재로서는 효과가 있습니다!
참고: 이 모든 것은 다음과 같습니다.<script>태그, 바로 앞에 있습니다.</body>HTML 페이지의 태그:
<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>
입력을 확인하고 확인란으로 확인하려면 이 스크립트를 사용하십시오.
$(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('.checkbox-parent').click(function(){
jQuery('.checkbox-child').prop(
'checked',
jQuery('.checkbox-parent').prop('checked')
);
});
JavaScript와 jQuery 모두에서 다음 작업을 수행할 수 있으며 이는 매우 간단합니다.
var getVal=$('#isAgeSelected').is(":checked"); // jQuery
var getVal=document.getElementById("isAgeSelected").checked //JavaScript
if (getVal==true) {
// do something
} else {
// do something
}
언급URL : https://stackoverflow.com/questions/7960208/jquery-if-checkbox-is-checked
반응형
'programing' 카테고리의 다른 글
| Git에서 현재 분기만 표시 (0) | 2023.05.16 |
|---|---|
| node.js 파일 제거 (0) | 2023.05.16 |
| 모듈 내보내기 대 Node.js 및 ES6의 내보내기 기본값 (0) | 2023.05.16 |
| PostgreSQL에서 정렬로 고정된 수의 행을 삭제하려면 어떻게 해야 합니까? (0) | 2023.05.16 |
| 새 프로젝트에 대한 새 빈 분기 생성 (0) | 2023.05.16 |