多种形式中，只有一种形式正在其余形式不工作

这里是链接到不同形式的页面，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，但我知道一些东西，但显然，不够...

来源

2015-05-14 Kristina Bressler

ID必须在文档方面独特的，这是基础 –

类activitiescb是相同的所有复选框，使它们对每个表单都是唯一的。让我们看看它的工作与否。 – Codelord

你为什么重新创建单选按钮？你为什么总是把它设置为true？ – epascarello

ID是因为它的点击并未除了第一个工作的唯一原因。

然后尝试给IDS &名字的形式，使其分隔者区分的形式。请始终记住，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 -->

来源

2015-05-14 12:47:03

好的，所以我给每个表单一个不同的ID。 JavaScript代码会是什么？这是功能吗？ $ function myform（）{ document.getElementById（“activitiesform1，activitiesform2，activitiesform3，activitiesform4，activitiesform5”）。id =“myform”; } –

@KristinaBressler给我2分钟我会完全检查你的代码，只是更新你。 –

非常感谢！它现在有效！所以区别不在于表单ID，而是在复选框ID中，对吗？而且我也不需要JavaScript来解决任何问题。 –

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

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

来源

2015-05-14 12:44:56

我没有看到这段代码的目的。但关于单选按钮 –

的好处，以及'this.checked'是什么意思？'应该这样做？ – epascarello

它将复选框的选中状态设置为true –

多种形式中，只有一种形式正在其余形式不工作

回答

相关问题