多種形式中，只有一種形式正在其餘形式不工作

這裏是鏈接到不同形式的頁面，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 –

多種形式中，只有一種形式正在其餘形式不工作

回答

相關問題