How to get radio button value of checked elements

Question

I have a page which is having Continent/Countries/City. Checkboxes are there for continent/Country. I want to get the city details only where country is checked. And is there any way other than using fieldset in html. Below is the code and also how to select all Country in 'select All' check box.

<form>
    <input type="checkbox" class="mainCheckBox" /> Select All <br />
    <fieldset>
        <input type="checkbox" class="parentCheckBox" /> North America <br />
        <div class="content">
            <input type="checkbox" value="" name="country"
                class="childCheckBox" /> Canada<br /> &nbsp; &nbsp;<input
                type="radio" name="cnstates" id="OT" checked />Ontario<br />
            &nbsp; &nbsp;<input type="radio" name="cnstates" id="AT" checked />Alberta
            <br /> <input type="checkbox" value="" name=""country""
                class="childCheckBox" /> United States<br /> &nbsp; &nbsp;<input
                type="radio" name="usstates" id="NY" checked />New York<br />
            &nbsp; &nbsp;<input type="radio" name="usstates" id="DC" />Washington
            DC
        </div>
    </fieldset>

    <fieldset>
        <input type="checkbox" class="parentCheckBox" /> Asia <br />
        <div class="content">
            <input type="checkbox" value="" name="country"
                class="childCheckBox" /> India<br /> &nbsp; &nbsp;<input
                type="radio" name="instates" id="MU" checked />Mumbai<br />
            &nbsp; &nbsp;<input type="radio" name="instates" id="DL" checked />Delhi
            <br /> <input type="checkbox" value="" name="country"
                class="childCheckBox" /> Russia<br /> &nbsp; &nbsp;<input
                type="radio" name="rustates" id="MW" checked />Moscow<br />
            &nbsp; &nbsp;<input type="radio" name="rustates" id="DC" />Aldan
        </div>
    </fieldset>

</form>

Jquery to select all countries when Continent is checked

 $(document).ready(
function() {
   $('input.childCheckBox').change(function() {
        $(this).closest('fieldset').find('.parentCheckBox').prop('checked',
            $('input.childCheckBox').length === $('input.childCheckBox:checked').length 
        ); 
    });

    //clicking the parent checkbox should check or uncheck all child checkboxes
    $(".parentCheckBox").click(
        function() {
            $(this).parents('fieldset:eq(0)').find('.childCheckBox').prop('checked', this.checked);
        }
    );
    //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
    $('.childCheckBox').click(
        function() {
            if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
                $(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', false);
            if (this.checked == true) {
                var flag = true;
                $(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
                    function() {
                        if (this.checked == false)
                            flag = false;
                    }
                );
                $(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', flag);
            }
        }
    );
}
); 

jsfiddle here

Answer 1

you can do like this:

$('.mainCheckBox').change(function(){

    if(this.checked)
    {
        $('.parentCheckBox').prop("checked","checked");
        $('.childCheckBox').prop("checked","checked");
    }
    else
    {
        $('.parentCheckBox').attr("checked",false);
        $('.childCheckBox').attr("checked",false);
    }

})

Here is DEMO

Answer 2

You can try this:

$('.mainCheckBox').on('change', function(){
    $(this).closest('form').find(':checkbox').prop('checked', this.checked);
});

Demo

---

You can add this script in your document.ready block.

---

You can get the values with this:

$('.childCheckBox').on('change', function () {
    var checkedRadioVal = $(this).nextAll(':radio:checked').val();
    console.log(checkedRadioVal);
});

But this won't give you values because you have not placed any value="" attribute to your radios, instead what i get to know that you want the ids you have assigned to your radios then for this you can use .attr() method you can update this var in above event:

var checkedRadioVal = $(this).nextAll(':radio:checked').attr('id');

Demo with getting values.

Answer 3

To start with, just don't bother about the fieldset . All it does is group the elements and add a box around them. Also, I would suggest you to use a dropdown to select the country. It will be easier as the countries are mutually exclusive. You can append the city list on the form after selecting the country. Here is a similar code I did with a bit of django and ajax.

When you select the region number, it gets the list of registered countries from server table and updates the form fields. You can replace the logic as per your requirements.

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#id_region").change(function() {
                $.post("jq_get_natty",
                    {
                        'region' : $('#id_region').val(),
                    },
                    function(data) {
                        $("#id_natty").empty();
                        for(var k in data) {
                            buf = (k + ". " + data[k] + "\n");
                            $("#id_natty").append("<option value=" + k + ">" + data[k] + "</option>");
                        }
                    }
                );
            });
        });
    </script>
</head>
<body>
<h2>Register</h2>
<hr />
<form action='add_person' method='post'>{% csrf_token %}
    <p><label for="id_name">Name:</label> <input id="id_name" maxlength="30" name="name" type="text" /></p>
    <p><label for="id_region">Natty:</label> <select id="id_region" name="region">
        <option value="" selected="selected">---------</option>
        {% for k in region %}
            <option value="{{ k }}">{{ k }}</option>
        {% endfor %}
        </select></p>
    <p><label for="id_natty">Natty:</label> <select id="id_natty" name="natty">
        <option value='1'>1</option>
        <option value='2'>2</option>
        </select></p>
<input type="submit" value="Register"/>
</form>
</body>
</html>

The following is my view:

def jquery_natty_regn(request):
    print("Entered the jQuery server function")
    print("post: ", request.POST)
    regn = request.POST.get('region')
    nat = m1.objects.filter(number=regn)
    print("Acquired jQuery AJAX")
    print("regn = ", regn)
    data = serializers.serialize("json", nat)
    response_data = {}
    for k in nat:
        print("k.pk = ", k.pk, "\t", "k.name", k.name, "k.number", k.number)
        response_data[k.pk] = k.name
    print(response_data)
    json_data = json.dumps(response_data)
    return HttpResponse(json_data,content_type="application/json")

Answer 4

You can do like

  $('.parentCheckBox').is(':checked')
  $('.childCheckBox').is(':checked')