同一页面中的多个表单带有复选框，其中只有一个表单有效，其余表单无效

Question

这里是 link 不同形式的页面，http://hamzakhan.name/dev/eric/options/five/fiveactivities.html。如您所见，第一个带有复选框的表单有效，但在其他表单上，当您单击复选框时，只有第一个表单有效。

我试图搜索这方面的答案，但我所能找到的只是一个谈论不同事物的主题，一些关于提交表格的内容，等等。我只是找不到与我正在寻找的内容相关的任何内容一页上的相同表格不能彼此独立工作。

我也尝试为此编写 javascript 代码，但它不起作用。

这是html代码

<div class="activitiesform">
   <form>
     <div class="activitiesfield1">
       <input type="checkbox" name="activitiescb" value="activities" id="activities1" class="activitiescb"/><label for="activities1"></label>
     </div>
     <div class="activitiesfield2">
       <input type="checkbox" name="activitiescb" value="activities" id="activities2" class="activitiescb"/><label for="activities2"></label>
     </div>
     <div class="activitiesfield3">
       <input type="checkbox" name="activitiescb" value="activities" id="activities3" class="activitiescb"/><label for="activities3"></label>
     </div>
     <div class="activitiesfield4">
       <input type="checkbox" name="activitiescb" value="activities" id="activities4" class="activitiescb"/><label for="activities4"></label>
     </div>
     <div class="activitiesfield5">  
      <input type="checkbox" name="activitiescb" value="activities" id="activities5" class="activitiescb"/><label for="activities5"></label>
     </div>
     <div class="activitiesfield6">
       <input type="checkbox" name="activitiescb" value="activities" id="activities6" class="activitiescb"/><label for="activities6"></label>
     </div>
     <div class="activitiesfield7">
       <input type="checkbox" name="activitiescb" value="activities" id="activities7" class="activitiescb"/><label for="activities7"></label>
     </div>
     <div class="activitiesfield8">
       <input type="checkbox" name="activitiescb" value="activities" id="activities8" class="activitiescb"/><label for="activities8"></label>
     </div>
   </form>
</div>

这是javascript代码

<script>
$(function() {
    $('.activitiescb').on('change', function() {
        this.checked = true;
        $(this).closest('form').find('.activitiescb').not(this).prop('checked', false);
    });
});
</script>

我真的需要在 Javascript 上做得更好。我擅长 html 和 css，但不擅长 Javascript，但我知道的东西不多，但显然还不够...

Answer 1

据我所知你在做什么 onChange 你是将当前复选框设置为 checked 并将表单中的所有其他复选框设置为 unchecked，这是单选按钮组的行为。如果你只想获得基本的复选框行为，其中 multiple 可以是 checked 或 unchecked 你可以这样做：

$(function() {
    $('.activitiescb').on('change', function() {
        if (this.checked)
             !this.checked;
        else
             this.checked;
    });
});

Answer 2

ID 是导致您的点击无效的唯一原因，除了第一个。

然后尝试通过为表单提供 ID 和名称来区分表单，以便将其分开。请始终记住，ID 是在整个页面中捕获该实体的唯一键。这意味着 id 对整个 DOM 应该是唯一的。如果它重复那么只有一个 id 是其他的将不起作用。

供参考：http://www.w3schools.com/jsref/prop_html_id.asp

我已经更新了您的代码，请检查并替换为您的代码好的，

<!-- form one starts -->
<form id="activitiesform1">
    <div class="activitiesfield1">
        <input type="checkbox" name="activitiescb" value="activities" id="firstdog_activity1" class="activitiescb">
        <label for="firstdog_activity1"></label>
    </div>
    <div class="activitiesfield2">
        <input type="checkbox" name="activitiescb" value="activities" id="firstdog_activity2" class="activitiescb">
        <label for="firstdog_activity2"></label>
    </div>
    <div class="activitiesfield3">
        <input type="checkbox" name="activitiescb" value="activities" id="firstdog_activity3" class="activitiescb">
        <label for="firstdog_activity3"></label>
    </div>
    <div class="activitiesfield4">
        <input type="checkbox" name="activitiescb" value="activities" id="firstdog_activity4" class="activitiescb">
        <label for="firstdog_activity4"></label>
    </div>
    <div class="activitiesfield5">
        <input type="checkbox" name="activitiescb" value="activities" id="firstdog_activity5" class="activitiescb"><label for="firstdog_activity5"></label>
    </div>
    <div class="activitiesfield6">
    <input type="checkbox" name="activitiescb" value="activities" id="firstdog_activity6" class="activitiescb"><label for="firstdog_activity6"></label>
    </div>
    <div class="activitiesfield7">
    <input type="checkbox" name="activitiescb" value="activities" id="firstdog_activity7" class="activitiescb"><label for="firstdog_activity7"></label>
    </div>
    <div class="activitiesfield8">
    <input type="checkbox" name="activitiescb" value="activities" id="firstdog_activity8" class="activitiescb"><label for="firstdog_activity8"></label>
    </div>
</form>
<!-- form one ends -->

<!-- form two starts -->
<form id="activitiesform2">
    <div class="activitiesfield1">
        <input type="checkbox" name="activitiescb" value="activities" id="seconddog_activity1" class="activitiescb">
        <label for="seconddog_activity1"></label>
    </div>
    <div class="activitiesfield2">
        <input type="checkbox" name="activitiescb" value="activities" id="seconddog_activity2" class="activitiescb">
        <label for="seconddog_activity2"></label>
    </div>
    <div class="activitiesfield3">
        <input type="checkbox" name="activitiescb" value="activities" id="seconddog_activity3" class="activitiescb">
        <label for="seconddog_activity3"></label>
    </div>
    <div class="activitiesfield4">
        <input type="checkbox" name="activitiescb" value="activities" id="seconddog_activity4" class="activitiescb">
        <label for="seconddog_activity4"></label>
    </div>
    <div class="activitiesfield5">
        <input type="checkbox" name="activitiescb" value="activities" id="seconddog_activity5" class="activitiescb"><label for="seconddog_activity5"></label>
    </div>
    <div class="activitiesfield6">
    <input type="checkbox" name="activitiescb" value="activities" id="seconddog_activity6" class="activitiescb"><label for="seconddog_activity6"></label>
    </div>
    <div class="activitiesfield7">
    <input type="checkbox" name="activitiescb" value="activities" id="seconddog_activity7" class="activitiescb"><label for="seconddog_activity7"></label>
    </div>
    <div class="activitiesfield8">
    <input type="checkbox" name="activitiescb" value="activities" id="seconddog_activity8" class="activitiescb"><label for="seconddog_activity8"></label>
    </div>
</form>
<!-- form two ends -->

<!-- form three starts -->
<form id="activitiesform3">
    <div class="activitiesfield1">
        <input type="checkbox" name="activitiescb" value="activities" id="thirddog_activity1" class="activitiescb">
        <label for="thirddog_activity1"></label>
    </div>
    <div class="activitiesfield2">
        <input type="checkbox" name="activitiescb" value="activities" id="thirddog_activity2" class="activitiescb">
        <label for="thirddog_activity2"></label>
    </div>
    <div class="activitiesfield3">
        <input type="checkbox" name="activitiescb" value="activities" id="thirddog_activity3" class="activitiescb">
        <label for="thirddog_activity3"></label>
    </div>
    <div class="activitiesfield4">
        <input type="checkbox" name="activitiescb" value="activities" id="thirddog_activity4" class="activitiescb">
        <label for="thirddog_activity4"></label>
    </div>
    <div class="activitiesfield5">
        <input type="checkbox" name="activitiescb" value="activities" id="thirddog_activity5" class="activitiescb"><label for="thirddog_activity5"></label>
    </div>
    <div class="activitiesfield6">
    <input type="checkbox" name="activitiescb" value="activities" id="thirddog_activity6" class="activitiescb"><label for="thirddog_activity6"></label>
    </div>
    <div class="activitiesfield7">
    <input type="checkbox" name="activitiescb" value="activities" id="thirddog_activity7" class="activitiescb"><label for="thirddog_activity7"></label>
    </div>
    <div class="activitiesfield8">
    <input type="checkbox" name="activitiescb" value="activities" id="thirddog_activity8" class="activitiescb"><label for="thirddog_activity8"></label>
    </div>
</form>
<!-- form three ends -->

<!-- form four starts -->
<form id="activitiesform4">
    <div class="activitiesfield1">
        <input type="checkbox" name="activitiescb" value="activities" id="forthdog_activity1" class="activitiescb">
        <label for="forthdog_activity1"></label>
    </div>
    <div class="activitiesfield2">
        <input type="checkbox" name="activitiescb" value="activities" id="forthdog_activity2" class="activitiescb">
        <label for="forthdog_activity2"></label>
    </div>
    <div class="activitiesfield3">
        <input type="checkbox" name="activitiescb" value="activities" id="forthdog_activity3" class="activitiescb">
        <label for="forthdog_activity3"></label>
    </div>
    <div class="activitiesfield4">
        <input type="checkbox" name="activitiescb" value="activities" id="forthdog_activity4" class="activitiescb">
        <label for="forthdog_activity4"></label>
    </div>
    <div class="activitiesfield5">
        <input type="checkbox" name="activitiescb" value="activities" id="forthdog_activity5" class="activitiescb"><label for="forthdog_activity5"></label>
    </div>
    <div class="activitiesfield6">
    <input type="checkbox" name="activitiescb" value="activities" id="forthdog_activity6" class="activitiescb"><label for="forthdog_activity6"></label>
    </div>
    <div class="activitiesfield7">
    <input type="checkbox" name="activitiescb" value="activities" id="forthdog_activity7" class="activitiescb"><label for="forthdog_activity7"></label>
    </div>
    <div class="activitiesfield8">
    <input type="checkbox" name="activitiescb" value="activities" id="forthdog_activity8" class="activitiescb"><label for="forthdog_activity8"></label>
    </div>
</form>
<!-- form four ends -->

<!-- form five starts -->
<form id="activitiesform5">
    <div class="activitiesfield1">
        <input type="checkbox" name="activitiescb" value="activities" id="fifthdog_activity1" class="activitiescb">
        <label for="fifthdog_activity1"></label>
    </div>
    <div class="activitiesfield2">
        <input type="checkbox" name="activitiescb" value="activities" id="fifthdog_activity2" class="activitiescb">
        <label for="fifthdog_activity2"></label>
    </div>
    <div class="activitiesfield3">
        <input type="checkbox" name="activitiescb" value="activities" id="fifthdog_activity3" class="activitiescb">
        <label for="fifthdog_activity3"></label>
    </div>
    <div class="activitiesfield4">
        <input type="checkbox" name="activitiescb" value="activities" id="fifthdog_activity4" class="activitiescb">
        <label for="fifthdog_activity4"></label>
    </div>
    <div class="activitiesfield5">
        <input type="checkbox" name="activitiescb" value="activities" id="fifthdog_activity5" class="activitiescb"><label for="fifthdog_activity5"></label>
    </div>
    <div class="activitiesfield6">
    <input type="checkbox" name="activitiescb" value="activities" id="fifthdog_activity6" class="activitiescb"><label for="fifthdog_activity6"></label>
    </div>
    <div class="activitiesfield7">
    <input type="checkbox" name="activitiescb" value="activities" id="fifthdog_activity7" class="activitiescb"><label for="fifthdog_activity7"></label>
    </div>
    <div class="activitiesfield8">
    <input type="checkbox" name="activitiescb" value="activities" id="fifthdog_activity8" class="activitiescb"><label for="fifthdog_activity8"></label>
    </div>
</form>
<!-- form five ends -->

同一页面中的多个表单带有复选框，其中只有一个表单有效，其余表单无效

Multiple forms in same page with check boxes in that only one form is working remaining forms not working

html

checkbox