Cara Menggunakan Checked Selector Dalam JQUery ~ Nyintak

Kali ini saya akan menjelaskan tentang Checked Selector JQuery. Apa itu Checked Selector? Checked Selector adalah Selector yang digunakan untuk memilih semua checkboxes atau radio yang telah dicek.

Syntax yang digunakan :

$('input[type="radio"]:checked') atau
$('input[type="checkbox"]:checked')

Menggunakan :checked Selector dalam Radio

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#btnSubmit').click(function(){
                var result = $('input[type="radio"]:checked');
                if(result.length>0){
                    $('.result').html(result.val() + " is checked");
                }else{
                    $('.result').html("No radio button checked");
                }
            })
        });
        </script>
    </head>
    <body>
        Gender : 
        <input type="radio" name="gender" value="Male">Male</input>
        <input type="radio" name="gender" value="Female">Female</input>
        <br/><br/>
        <input type="submit" id="btnSubmit" value="submit"/>
        <br/><br/>
        <div class="result"></div>
    </body>
</html>

Menggunakan :checked Selector dalam Radio

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#btnSubmit').click(function(){
                var result = $('input[type="checkbox"]:checked');
                if(result.length>0){
                    var resultString = result.length + " checkboxes checked<br/>";
                    result.each(function(){
                        resultString += $(this).val() + " <br/>";
                    });
                    $('.result').html(resultString);
                }else{
                    $('.result').html("No checkbox checked");
                }
            })
        });
        </script>
    </head>
    <body>
        Skills : 
        <input type="checkbox" name="skill" value="JavaScript">JavaScript</input>
        <input type="checkbox" name="skill" value="JQuery">JQuery</input>
        <input type="checkbox" name="skill" value="PHP">PHP</input>
        <input type="checkbox" name="skill" value="HTML">HTML</input>
        <br/><br/>
        <input type="submit" id="btnSubmit" value="submit"/>
        <br/><br/>
        <div class="result"></div>
    </body>
</html>

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Wednesday 1 June 2016

Cara Menggunakan Checked Selector Dalam JQUery

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels