확인란이 선택된 경우 jQuery

414

아래에 동일한 tr의 확인란이 선택된 경우에만 트리거하려는 기능이 있습니다. 내가 뭘 잘못하고 있는지 알려주세요. 일반적인 방법은 효과가 없습니다. 감사

JS

$(".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">&nbsp;</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>

jquery checkbox if-statement

— 클린턴 그린
소스

$('input.checkbox_check').checkedtrue체크되어 있으면 반환 합니다. false그렇지 않으면

— Don Cheadle

1

@mmcrae, 그건 틀렸어. jQuery 객체에는 속성이 없습니다 checked. 당신이 생각하는 것$('input.checkbox_check')[0].checked

— Paul

1049

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

— 슬랙
소스

4

CoffeeScript에서 :if $('#my_checkbox').is ':checked'

— Dennis

11

코드의 jQuery 문서에 의해 확인, "확인란이 선택되어 있는지 확인하기 위해 크로스 브라우저 호환 방법은 재산 사용하는 것입니다 if ( elem.checked )이나 if ( $( elem ).prop( "checked" ) )또는 if ( $( elem ).is( ":checked" ) )". api.jquery.com/prop

— Adrien

우리가 성능에 대해 이야기한다면, 클린턴의 질문에 이러한 의견 중 일부를 직접 추가해야하며, 가장 빠른 권장 사항은 ID를 추가하는 것입니다.

— Tom Stickel

128

jQuery 1.6 이상의 경우 :

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

확인란이 선택되어 있는지 확인하는 브라우저 간 호환 방법은 https://api.jquery.com/prop/ 속성을 사용하는 것입니다.

— 알렉스
소스

8

".prop () 메소드는 일치하는 세트의 첫 번째 요소에 대한 특성 값만 가져옵니다." api.jquery.com/prop

— Adrien

57

이 $('#checkboxId').is(':checked')경우 확인을 위해

이 $("#checkboxId").prop('checked', true) 확인

& 이것은 $("#checkboxId").prop('checked', false)선택을 취소합니다

— DA001
소스

2

논리적으로 다음 단계를 제공하기위한 것입니다.

— Jason

22

내 경우와 같은 이유로 위의 솔루션 중 어느 것도 작동하지 않으면 다음을 시도하십시오.

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

— 와이 일 카림
소스

이 솔루션은 저에게 효과적입니다

— 농담

8

ATTR의 주요 차이점보기 | 제안 | 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>

스 니펫 확장

— 귀고
소스

7

확인 된 경우 :

$( "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.

확인 된 val을 얻으십시오 .

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

확인 된 val 번호를 얻으십시오 .

$( "SELECTOR:checked" ).length

체크 박스 체크 또는 체크 해제

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

$( "SELECTOR:checked" ).val()on value="on"은 체크하면 "on"을, 체크하지 않으면 ""를 제공합니다-유용합니다!

— Fanky