如何獲取選中元素的單選按鈕值

Question

我有一個頁面正在瀏覽大陸/國家/城市。 有用於大洲/國家/地區的復選框。 我只想獲取檢查國家的城市詳細信息。 除了在html中使用fieldset之外，還有什么其他方法。 以下是代碼，以及如何在“全選”復選框中選擇所有國家/地區。

<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將選擇所有國家

 $(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在這里

Answer 1

您可以這樣：

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

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

})

這是演示

Answer 2

您可以嘗試以下方法：

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

演示

---

您可以將此腳本添加到document.ready塊中。

---

您可以通過以下方式獲取值：

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

但這不會給您帶來價值，因為您沒有在收音機中放置任何value=""屬性，而是我知道您想要分配給收音機的ID，然后可以使用.attr()您可以在上述事件中更新此var的方法：

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

演示如何獲取價值。

Answer 3

首先，只要不用理會fieldset 。 它所做的只是將元素分組並在它們周圍添加一個框。 另外，我建議您使用dropdown選擇國家。 由於這兩個國家是相互排斥的，因此會更容易。 選擇國家/地區后，您可以在表格上附加城市列表。 這是我用django和ajax做的類似代碼。

當您選擇區域號時，它將從服務器表中獲取注冊國家的列表並更新表單字段。 您可以根據需要替換邏輯。

<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>

以下是我的看法：

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

你可以喜歡

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