Development Tip

jQuery val () 및 확인란

yourdevel 2020. 12. 8. 20:06
반응형

jQuery val () 및 확인란


몇 가지 근거가 있습니까 val()체크 박스 컨트롤에 대한 쓸모없는 존재는 다른 모든 입력 컨트롤을 통해 지속적으로 입력 데이터를 얻기위한 유용한 반면,?

예를 들어 체크 박스의 경우 at 은 체크 박스 상태에 관계없이 항상 "on"을 반환합니다. 실제로 "value"속성이없는 다른 입력 컨트롤 (예 : select 및 textarea)의 경우 예상대로 작동합니다. 보다:

http://jsfiddle.net/jamietre/sdF2h/4/

나는 그것이 반환하지 왜 좋은 이유 생각할 수 없다 truefalse. 실패하면 적어도 체크 할 때만 "on"을 반환하고 그렇지 않으면 빈 문자열을 반환합니다. 체크 박스에 value속성 이 없기 때문에 적어도 항상 빈 문자열을 반환 합니다!

분명히를 사용하여 값을 얻는 방법을 알고 attr있지만 여기에 상황이 있습니다. 서버에서 HTML 구문 분석을 수행하기 위해 간단한 (어쨌든) C # jQuery 구현을 개발 중이며 jQuery의 구현에 완전히 충실하여 동일한 DOM에 대해 클라이언트 또는 서버에서 일관되게 작동하도록 노력하고 있습니다. 그러나 이것은 어리석은 것처럼 보이며 실제로 "값"을 코딩하여 체크 박스에 대해 "ON"을 반환하는 데 어려움을 겪고 있습니다. 하지만 그렇지 않으면 일관성이 없습니다. 그래서 저는 이해하려고 노력하고 있습니다. 이것을하는 이유가 있습니까? 그것은 어떤 목적에 부합합니까, 아니면 단순히 일종의 유물입니까? val()확인란에 대해 방법을 사용하는 사람이 있습니까? 그렇다면 그 이유는 무엇입니까? 그렇지 않다면


나는 그것이 진실 또는 거짓을 반환하지 않는 이유를 생각할 수 없습니다. 실패하면 적어도 체크 할 때만 "on"을 반환하고 그렇지 않으면 빈 문자열을 반환합니다. 체크 박스에 값 속성이 없기 때문에 적어도 항상 빈 문자열을 반환합니다.

확인란에는 값 속성이 있습니다. 예를 들어 그것을 사용하는 것은 매우 일반적입니다. 양식의 다중 체크 박스, 예 :

<input type="checkbox" name="foo[]" value="1" />
<input type="checkbox" name="foo[]" value="2" />

그런 다음 사용자가 양식을 제출하면 서버는 foo[]배열 값을 확인하여 확인 된 확인란을 구문 분석 할 수 있습니다 . 확인란의 값은 선택 여부에 관계없이 변경 되지 않습니다. 브라우저는 체크되지 않은 체크 박스의 값을 서버로 보내지 않습니다. 예를 들면. $('#your-form').serialize()jQuery에서는 유사하게 작동합니다. 선택하지 않은 체크 박스의 값을 포함해서는 안됩니다. 확인란에서 값을 생략하면 기본값은 on.

jQuery에서 개별 확인란이 선택되어 있는지 여부를 확인하려면 가장 설명적인 방법은 다음과 같습니다. $(this).is(':checked')


"체크 박스에는 value속성 이 없습니다"라고 말합니다 . 반대로, 확인란과 라디오 상자를 제외하고value 속성은 선택 사항 입니다.

에서 W3C의 사양 :

[ value속성]은 유형 속성에 "radio"또는 "checkbox"값이있는 경우를 제외하고는 선택 사항입니다.

on사양을 무시하고 value속성을 설정하지 않을 때 브라우저가 요소에 제공하는 기본값 입니다.

값이 의미하는 바를 기억해야합니다 name. 양식이 제출 될 때 요소의 와 함께 서버로 전송됩니다. 선택하지 않으면 값이 전송되지 않습니다. 따라서 값 on은 확인란이 선택된 경우에만 전송됩니다.


아마도 이것이 도움이 될 것입니다

$(document).ready(function() {
    $('input[type=checkbox]').click(function() {
      alert("val="+$(this).val()+",checked="+$(this).attr('checked'));
    });

});

사용은 input[type=checkbox]선택 input type="checkbox"체크 박스가 입력 = 유형 "체크 박스"이고 이후

또한 값 속성을 확인란에 입력하십시오.

jsfiddle

최신 정보

<form method="post" action="#">
    PHP<input type="checkbox" name="ch[]" value="PHP"><br/>
    JS<input type="checkbox" name="ch[]" value="JS"><br/>
    JAVA<input type="checkbox" name="ch[]" value="JAVA"><br/>
    PYTHON<input type="checkbox" name="ch[]" value="PYTHON"><br/>
    <input type="submit" name="submit"/>
</form>

그리고 PHP

if($_POST){
foreach($_POST['ch'] as $post => $value){
    echo "$post -> $value <br/>";
}
}

버튼의 공통 그룹이므로 모두 동일한 이름을 공유합니다. 어떤 것이 확인되었고 어떤 것이 그들의 가치를 통해 이루어지지 않았는지 알고 있습니다.

다른 방법은

if($_POST){
    foreach($_POST as $post => $value){
        echo "$post -> $value <br/>";
    }
}

<form method="post" action="#">
    PHP<input type="checkbox" name="PHP"><br/>
    JS<input type="checkbox" name="JS"><br/>
    JAVA<input type="checkbox" name="JAVA"><br/>
    PYTHON<input type="checkbox" name="PYTHON"><br/>
    <input type="submit" name="submit"/>
</form>

그러나 이전은 더 역동적이고 덜 지루한 것을 추가하는 것 같습니다 (나는 믿습니다).

그리고 @Capsule의 질문에 관해서

alert("val="+$(this).val()+",checked="+$(this).attr('checked'));
<input type="checkbox"> Check me.

on확인란의 기본값이라고 생각하는 값을 반환합니다 .

그리고 두 번째 실험은 또한 on가치를 제공합니다 .

내가 틀리지 않기를 바랍니다.


val 함수에 배열을 전달하면 확인란의 값이 배열의 값과 일치하면 확인란이 선택된 것으로 설정됩니다. 출처 : http://api.jquery.com/val/#val-value

<input id="checkbox" type="checkbox" value="remember">    

$("#checkbox").val(["remember"]);

체크 박스는 텍스트 박스와 같은 값을 가지며,이 값은 제출시 체크 박스가 선택된 경우에만 양식 제출시 서버로 전송됩니다.

Unlike text box, checkbox has default value which is on - this is sent to the server when the checkbox is selected but has no value of its own, so that the processing code can know it was selected.

So the .val() method is working just fine, returning the value of the element.

You're correct that jQuery is missing simple way to see if a specific checkbox/radio button is selected, something like $("#mycheckbox").checked() but that's what we have plugins for. :)


A checkbox is not always alone and its value is passed when submitting the form (otherwise, the name/value is not passed at all).

It's very useful when making arrays out of checkboxes, you can use name="test[]" as their name, and set different values in each. When parsing the submitted result, you end up with an array containing all the checked values


You can do some surgery to jquerys val function to act like that. Return true or false whether theres no value attr.

(function (){
    var jval = $.fn.val
    function superval(value){
        if (value === undefined){
            if (this.is("input") && this.attr("type") == "checkbox"){
                if (this.attr("value")===undefined){
                    return this[0].checked
                }
            }
            return jval.call(this)
        } else {
            return jval.call(this, value)
        }
    }
    $.fn.val = superval
})()

console.log($('<input type="checkbox"/>').val()); // false
console.log($('<input type="checkbox" checked="whatever"/>').val()); // true
console.log($('<input type="checkbox" checked="whatever" value="yes"/>').val()); // yes
console.log($('<input type="text" value="heya"/>').val()); // heya
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

참고URL : https://stackoverflow.com/questions/5621324/jquery-val-and-checkboxes

반응형