itsource

jQuery set 확인란 선택

mycopycode 2023. 5. 27. 11:08
반응형

jQuery set 확인란 선택

저는 이미 가능한 모든 방법을 시도했지만 여전히 작동하지 않았습니다.나는 모달 창이 있고,checkbox모달이 열리면,checkbox선택 또는 선택 취소는 데이터베이스 값을 기준으로 해야 합니다.(이미 다른 양식 필드와 함께 작업하고 있습니다.)제가 확인을 해보려고 했는데 작동이 안 됐어요.

내 HTML div:

<div id="fModal" class="modal" >
    ...
    <div class="row-form">
        <div class="span12">
            <span class="top title">Estado</span>

          <input type="checkbox"  id="estado_cat" class="ibtn">
       </div>
    </div>             
</div>

및 jQuery:

$("#estado_cat").prop( "checked", true );

저도 시도해봤는데요.attr포럼에서 볼 수 있는 다른 것들도 있지만, 아무 것도 작동하지 않는 것 같습니다.
누가 나에게 올바른 길을 가르쳐 줄 수 있습니까?


편집

좋아요, 여기서 뭔가를 놓치고 있어요.확인란이 페이지에 있으면 코드를 사용하여 확인/해제할 수 있지만, 모달 에 있는 것입니까, 할 수 없습니다.저는 수십 가지 다른 방법을 시도했습니다.

모달을 여는 링크가 있습니다.

<a href='#' data-id='".$row['id_cat']."' class='editButton icon-pencil'></a>

및 jQuery를 사용하여 클릭 소리를 "듣고" 일부 텍스트 상자를 데이터베이스에서 가져온 데이터로 채우는 등의 작업을 실행할 수 있습니다.모든 것이 제가 원하는 대로 작동하지만, 코드를 사용하여 체크박스를 선택/해제할 수 없다는 것이 문제입니다.도와주세요!

$(function () {
    $(".editButton").click(function () {
        var id = $(this).data('id');
        $.ajax({
            type: "POST",
            url: "process.php",
            dataType: "json",
            data: {
                id: id,
                op: "edit"
            },
        }).done(function (data) {
            // The next two lines work fine,
            // i.e. it grabs the value from database and fills the textboxes
            $("#nome_categoria").val(data['nome_categoria']);
            $("#descricao_categoria").val(data['descricao_categoria']);

            // Then I tried to set the checkbox checked (because it's unchecked by default)
            // and it does not work
            $("#estado_cat").prop("checked", true);
            $('#fModal').modal('show');
        });

        evt.preventDefault();
        return false;
    });
});

당신은 'prop' 기능을 사용해야 합니다.

.prop('checked', true);

jQuery 1.6 이전 버전(사용자 2063626의 답변 참조):

.attr('checked','checked')

제안된 답변을 모두 가져와서 내 상황에 적용 - 검색된 값의 true(체크박스를 켜야 함) 또는 false(체크박스를 켜지 않아야 함)를 기준으로 확인란을 선택하거나 선택 취소하려고 시도했지만 위의 모든 것을 시도한 결과 .prop("체크", true) 및 .prop("체크", false")를 사용하는 것이 올바른 해결책임을 알게 되었습니다.

아직 댓글을 달거나 답변을 올릴 수는 없지만, 이것이 대화에 추가될 만큼 중요하다고 느꼈습니다.

다음은 검색된 값 "allDay"가 참이면 ID "even_allday_yn" 확인란을 선택하는 전체 일정 수정에 대한 긴 핸드 코드입니다.

if (allDay)
{
    $( "#even_allday_yn").prop('checked', true);
}
else
{
    $( "#even_allday_yn").prop('checked', false);
}

아래 코드를 사용해 보십시오.

$("div.row-form input[type='checkbox']").attr('checked','checked')

OR

$("div.row-form #estado_cat").attr("checked","checked");

OR

$("div.row-form #estado_cat").attr("checked",true);

확인란이 존재하는 즉시 "확인됨" 특성이 '확인됨'입니다.따라서 확인란을 선택/해제하려면 속성을 설정/해제해야 합니다.

확인란을 선택하는 경우:

$('#myCheckbox').attr('checked', 'checked');

확인란의 선택을 취소하는 경우:

$('#myCheckbox').removeAttr('checked');

선택한 상태를 테스트하는 경우:

if ($('#myCheckbox').is(':checked'))

도움이 되길...

모달 창(동적이든 페이지에 있든)에 있기 때문에 다음 코드를 사용하여 목표를 달성할 수 있습니다. (저는 제 사이트에서 동일한 문제에 부딪혔고 이렇게 수정했습니다.)

HTML:

<div class="content-container" style="text-align: right;">
    <input type="checkbox" id="QueryGroupCopyQueries">
    <label for="QueryGroupCopyQueries">Create Copies</label>                                                   
</div>

코드:

$.each(queriesToAddToGroup, function (index, query) {
    if (query.groupAddType === queriesGroupAddType.COPY) {

        // USE FIND against your dynamic window and PROP to set the value
        // if you are using JQUERY 1.6 or higher.
        $(kendoWindow).find("input#QueryGroupCopyQueries").prop("checked", true);

        return;
    }

위의 "kendoWindow"에는 내 창이 있습니다(내 창은 동적이지만 페이지에서 직접 요소에 추가할 때도 이 작업을 수행합니다).일련의 데이터("쿼리")를 반복하고 있습니다.그룹에 추가")를 눌러 COPY 속성이 있는 행이 있는지 확인합니다.그렇다면 사용자가 이 창에서 저장할 때 해당 속성을 설정하는 창 내의 확인란을 켜고 싶습니다.

저는 이것이 Jquery 솔루션을 요구한다는 것을 알고 있지만, 저는 이것을 일반 자바스크립트로 전환하는 것이 매우 쉽다는 것을 지적하고 싶습니다.

var element = document.getElementById("estado_cat");
element.checked = true;

현재 버전과 미래 버전에서 모두 작동합니다.

.attr("checked",true)
.attr("checked",false)

효과가 있을 것입니다.true 및 false가 따옴표 안에 없는지 확인합니다.

GreaseMonkey 스크립트에서 이 기능을 사용하여 페이지의 확인란을 자동으로 선택하려는 경우, 선택한 속성을 설정하는 것만으로는 관련 작업이 트리거되지 않을 수 있습니다.이 경우 확인란을 "클릭"하면 선택한 속성도 설정할 수 있습니다.

$("#id").click()

당신은 아래와 같이 코드를 작성할 수 있습니다.

HTML

<input type="checkbox"  id="estado_cat" class="ibtn">

jQuery

$(document).ready(function(){
    $(".ibtn").click(function(){
        $(".ibtn").attr("checked", "checked");
    });
});

당신에게 효과가 있기를 바랍니다.

<body>
      <input id="IsActive" name="IsActive" type="checkbox" value="false">
</body>

<script>
    $('#IsActive').change(function () {
         var chk = $("#IsActive")
         var IsChecked = chk[0].checked
         if (IsChecked) {
          chk.attr('checked', 'checked')
         } 
         else {
          chk.removeAttr('checked')                            
         }
          chk.attr('value', IsChecked)
     });
</script>

나를 위해 일한 것:

$checkbok.prop({checked: true});
$("#divParentClip").find("#subclip_checkbox")[0].checked=true;

찾기는 배열을 반환하므로 항목이 하나만 있더라도 [0]을(를) 사용하여 가져옵니다.

만약 당신이 find를 사용하지 않는다면 그때.

$("#subclip_checkbox").checked=true;

이것은 Mozilla Firefox에서 잘 작동했습니다.

가 jQuery UI를 사용하고 있기 때문에 이 작업을 수행해 보십시오(만약 그렇지 않다면 의견을 제시해 주십시오).

 $("#fModal" ).dialog({
     open: function( event, ui ) {

     if(//some hidden value check which stores the DB value==expected value for
      checking the Checkbox)

         $("div.row-form input[type='checkbox']").attr('checked','checked');

    }
   });

달리기를 해보았습니까?$("#estado_cat").checkboxradio("refresh")에?

효과가 있습니다.

 $("div.row-form input[type='checkbox']").attr('checked','checked');

저도 이 문제에 부딪혔습니다.

그리고 여기 내 오래된 작업 금지 코드가 있습니다.

if(data.access == 'private'){
     Jbookaccess.removeProp("checked") ; 
    //I also have tried : Jbookaccess.removeAttr("checked") ;
 }else{
    Jbookaccess.prop("checked", true)
}

여기 지금 작동하는 나의 새로운 코드가 있습니다.

if(data.access == 'private'){
     Jbookaccess.prop("checked",false) ;
 }else{
    Jbookaccess.prop("checked", true)
}

따라서 핵심은 작동하기 전에 확인된 속성이 존재하고 제거되지 않았는지 확인하는 것입니다.

최신 버전의 jquery를 사용하고 있기 때문에 이 문제가 발생합니다.attr('checked')아온다를 합니다.'checked'하는 동안에prop('checked')아온다를 합니다.true.

모달 창을 로드한 후 확인란을 설정합니다.페이지를 로드하기 전에 확인란을 설정하는 것 같습니다.

$('#fModal').modal('show');
$("#estado_cat").attr("checked","checked");
<div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" name="quiz_answer" id="customSwitch0">
      <label class="custom-control-label" for="customSwitch0"><span class="fa fa-minus fa-lg mt-1"></span></label>
  </div>

ID와 속성에 대해 각각 증분해야 합니다.동적으로 추가된 부트스트랩 확인란입니다.

$(document).on('change', '.custom-switch', function(){
    let parent = $(this);
    parent.find('.custom-control-label > span').remove();
    let current_toggle = parent.find('.custom-control-input').attr('id');
    if($('#'+current_toggle+'').prop("checked") == true){
        parent.find('.custom-control-label').append('<span class="fa fa-check fa-lg mt-1"></span>');
    }
    else if($('#'+current_toggle+'').prop("checked") == false){
        parent.find('.custom-control-label').append('<span class="fa fa-minus fa-lg mt-1"></span>');
    }
})

언급URL : https://stackoverflow.com/questions/15044340/jquery-set-checkbox-checked

반응형