我有一个有大陆/国家/城市的页面。复选框适用于大陆/国家。我想仅在检查国家/地区的情况下获取城市详细信息。除了在html中使用fieldset之外还有什么方法吗？以下是代码，以及如何选择所有国家＆＃39;选择全部＆＃39;复选框。
<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 /> <input
type="radio" name="cnstates" id="OT" checked />Ontario<br />
<input type="radio" name="cnstates" id="AT" checked />Alberta
<br /> <input type="checkbox" value="" name=""country""
class="childCheckBox" /> United States<br /> <input
type="radio" name="usstates" id="NY" checked />New York<br />
<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 /> <input
type="radio" name="instates" id="MU" checked />Mumbai<br />
<input type="radio" name="instates" id="DL" checked />Delhi
<br /> <input type="checkbox" value="" name="country"
class="childCheckBox" /> Russia<br /> <input
type="radio" name="rustates" id="MW" checked />Moscow<br />
<input type="radio" name="rustates" id="DC" />Aldan
</div>
</fieldset>
</form>
Jquery在选中Continent时选择所有国家/地区
$(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);
}
}
);
}
);
答案 0 :(得分：1)
$('.mainCheckBox').change(function(){
if(this.checked)
{
$('.parentCheckBox').prop("checked","checked");
$('.childCheckBox').prop("checked","checked");
}
else
{
$('.parentCheckBox').attr("checked",false);
$('.childCheckBox').attr("checked",false);
}
})
这是DEMO
答案 1 :(得分：0)
你可以试试这个：
$('.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 checkedRadioVal = $(this).nextAll(':radio:checked').attr('id');
答案 2 :(得分：0)
首先，请不要担心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")
答案 3 :(得分：0)
你可以这样做
$('.parentCheckBox').is(':checked')
$('.childCheckBox').is(':checked')