堆棧內存溢出
  簡體   English   中英

javascript選擇表格中的所有復選框

[英]javascript select all checkboxes in a table

 原文  2011-08-30 23:42:54  2   7    javascript/ html

問題描述

我想制作一個頁面，其中包含一個包含各種網頁的表格，每個網頁旁邊都有復選框。 我希望用戶能夠選擇多個站點，然后使用谷歌欄搜索這些站點。 我有一個表格，其中每個單元格都有一個填充了復選框的表格。 每個單元格都有一個 checkall 按鈕，用於檢查該單元格中的所有選項。 我想添加一個復選框來選擇頁面上的所有選項。 （是的，我可以忽略這個選項，但我有點想知道如何訪問單元格中的所有框，以便我可以像我想要的那樣用谷歌搜索。）這基本上就是我所擁有的。 其 checkPage 函數內的部分此時需要幫助

<html>
<head>
<script type="text/javascript">
    function checkAll(checkname, bx) {
        for (i = 0; i < checkname.length; i++){
            checkname[i].checked = bx.checked? true:false;
        }
    }
    function checkPage(bx){


        var bxs = document.getElementByTagName ( "table" ).getElementsByTagName ( "link" ); 

        for(i = 0; i < bxs.length; i++){
            bxs[i].checked = bx.checked? true:false;
        }
    }
</script>


</head>
<body>
<input type="checkbox" name="pageCheck"  value="yes" onClick="checkPage(this)"><b>Check Page</b>
<table border="1" name ="table">

<tr>
    <td name ="list00">
        <form name ="list00">
            <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list00.link, this)"><b>Check All</b><dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>
        </form>
    </td>
    <td><form name ="list01">
            <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list01.link, this)"><b>Check All</b><dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>      
        </form></td>
</tr>
<tr>
    <td><form name ="list10">
            <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list10.link, this)"><b>Check All</b><dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>  
        </form></td>
    <td><form name ="list11">
            <input type="checkbox" name="Check_ctr" value="yes" onClick="checkAll(document.list11.link, this)"><b>Check All</b><dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>
            <input type="checkbox" name="link" value="something.com">something.com<dd>  
        </form></td>
</tr>
</table>

</body>
</html>

7 個解決方案

解決方案1
 42 已采納  2011-08-30 23:57:51

function checkAll(bx) {
  var cbs = document.getElementsByTagName('input');
  for(var i=0; i < cbs.length; i++) {
    if(cbs[i].type == 'checkbox') {
      cbs[i].checked = bx.checked;
    }
  }
}

從復選框的 onclick 屬性調用該函數以檢查所有

<input type="checkbox" onclick="checkAll(this)">

編輯我有點誤讀了你的問題，我看到你已經在你的代碼中嘗試過了。 getElement s ByTagName 必須是復數，你可能在那里打錯了，並且必須是上面答案指定的標簽

編輯：將主復選框作為參數傳遞將允許按照 vol7ron 的建議切換選中/取消選中，並已在此答案中進行了適當修改。

該問題要求頁面上的所有復選框，所以這就足夠了。

但是，可以通過多種方式來控制要查找復選框的元素，方法太多了，無法詳細介紹，但如果要控制的所有復選框都是來自一個元素的分支節點，則示例可以是 document.getElementById(id).getElementsByTagName。
否則，您可以通過進一步的標簽名稱檢索/自定義類名稱檢索進行迭代，僅舉幾例。

解決方案2
 3  2011-08-31 00:02:42

示例： http : //jsfiddle.net/vol7ron/kMBcW/

function checkPage(bx){                   
   for (var tbls=document.getElementsByTagName("table"), i=tbls.length; i--; )
      for (var bxs=tbls[i].getElementsByTagName("input"), j=bxs.length; j--; )
         if (bxs[j].type=="checkbox")
            bxs[j].checked = bx.checked;
}

解決方案3
 1  2020-07-28 05:33:42

使用香草js

checkAll = box => {
const checkboxes = document.getElementsByTagName('input')
for (const checkbox of checkboxes) {
  if (checkbox.type == 'checkbox')
    checkbox.checked = box.checked
}

放入你的html

<input type="checkbox" onclick="checkAll(this)">

解決方案4
 1  2011-08-31 00:03:53

你試過 jQuery 嗎？ 它正在成為用於 DOM 操作的 javascript 標准庫（stackoverflow 也使用 in）。

有了它你可以做 $(':checkbox').prop('checked', true); 檢查頁面上的每個復選框（但您可能不想只在表格中檢查）。

好吧，無論如何開始使用 jQuery，它會讓你的生活更輕松、更快樂，並且會為你節省大量時間。

解決方案5
 0  2015-07-20 18:42:39

...或者更簡單，如果你想翻轉相應表單中的所有復選框：

function checkAll(bx){
    var form = bx.form;
    var ischecked = bx.checked;
    for (var i = 0; i < form.length; ++i) {
        if (form[i].type == 'checkbox') {
            form[i].checked = ischecked;
        }
    }
}

...

<input type="checkbox" onclick="checkAll(this)">

解決方案6
 0  2021-11-29 05:11:32

就我而言，它幫助了我

    <template>
  <div class="container">
    <ul class="list-group pt-1">
      <li class="list-group-item align-center">
        <button data-bs-toggle="collapse" data-bs-target="#dat_input" aria-expanded="false" aria-controls="income-expense" class="btn btn-sm border border-dark">
          Yana
        </button>
        <nuxt-link :to="`/admin/question/excel/create`" class="btn btn-success btn-sm">Excel orqali test qo'shish</nuxt-link>
        <span class="float-end">
          <button type="button" accesskey="1" class="btn btn-green btn-sm ">1 kunlik</button>
          <nuxt-link :to="`/admin/question`" class="btn btn-danger btn-sm " accesskey="b">Orqaga</nuxt-link>
        </span>
      </li>
      <li id="dat_input" class="list-group-item collapse">
        <p>Bu yerga endi biror nima qo`shiladi</p>
      </li>
    </ul>
    <div class="card mt-1">
      <table class="table table-sm">
        <thead class="table-dark table-sm">
        <tr>
          <th scope="col" class="text-center">
            <input class="form-check-input" type="checkbox" @click="selectAll(this, $event)">
          </th>
          <th scope="col" class="text-center"><i class="bi bi-sort-numeric-down-alt"></i></th>
          <th scope="col" class="text-center"><i class="bi bi-calendar3"></i></th>
          <th scope="col" class="float-left">Savol</th>
          <th scope="col" class="float-left">To'g'ri javob</th>
          <th scope="col" class="text-center"><i class="bi bi-alarm"></i></th>
          <th scope="col" class="text-center"><i class="bi bi-cash"></i></th>
          <th scope="col" class="text-center"><i class="bi bi-person-plus"></i></th>
          <th scope="col" style="width: 7%; text-align: center;"><i class="bi bi-diagram-3"></i></th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(question, id) in questions">
          <td width="1%" class="text-center align-middle">
            <input class="form-check-input" type="checkbox" @click="checkbox($event, question.id)">
          </td>
          <td width="3%" class="text-center align-middle" v-text="question.id"></td>
          <td width="8%" class="text-center  align-middle" v-text="question.create"></td>
          <td class="float-left  align-middle">{{ question.question }} <i class="bi bi-arrow-right"></i></td>
          <td class="float-left  align-middle" v-text="question.answer[0]"></td>
          <td width="1%" class="text-center align-middle" v-text="question.time"></td>
          <td width="1%" class="text-center align-middle"> {{ question.money }}</td>
          <td width="1%" class="text-center align-middle"> {{ question.rating }}</td>
          <td width="8%" class="text-center align-middle">
            <nuxt-link :to="`/admin/question/view/${question.id}`" class="btn btn-success btn-sm padingkichkina"><i class="bi bi-eye"></i></nuxt-link>
            <nuxt-link :to="`/admin/question/edit/${question.id}`" class="btn btn-primary btn-sm padingkichkina"><i class="bi bi-pencil"></i></nuxt-link>
            <a class="btn btn-outline-danger align-middle btn-sm padingkichkina" @click="deleteQuestion(question.id, question.question)"><i class="bi bi-trash"></i></a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="card" v-if="next_page_url !== null">
      <button class="btn btn-success" @click="getPaginateTrade">
        Yana yuklash
      </button>
    </div>
  </div>
</template>
<script>
import Swal from 'sweetalert2'

export default {
  middleware: 'isAdmin',
  data() {
    return {
      questions: [],
      success: false,
      next_page_url: null,
      selected: [],
      isCheckAll: false,
    }
  },
  mounted() {
    this.$loading.show()
    this.getQuestions()
  },
  methods: {
    async getQuestions() {
      this.$axios.get('auth/questionsexcel')
        .then((res) => {
          this.questions = res.data.data.data;
          if (res.data.next_page_url !== null) {
            this.next_page_url = res.data.data.next_page_url
          }
        }).catch((error) => {
        this.has_error = true
        console.log(error.response.data.message)
      });
      this.$loading.hide();
    },
    async getPaginateTrade() {
      this.$axios.get(`${this.next_page_url}`)
        .then((res) => {
          if (res.data.next_page_url !== null) {
            this.next_page_url = res.data.data.next_page_url
            const questions = this.questions;
            this.questions = questions.concat(res.data.data.data)
          } else {
            this.SwalMixin("Boshqa savollar qolmadi", 'error')
          }
        }).catch((error) => {
        this.has_error = true
        console.log(error.response.data.message)
      });
    },
    checkbox(event, id) {
      this.isCheckAll = !this.isCheckAll;
      let array = this.selected;
      if (event.target.checked) {
        this.selected = array.concat(id);
      } else {
        this.selected = array.filter(item => item !== id);
      }
    },
    selectAll(bx, event) {
      var cbs = document.getElementsByTagName('input'), i = 0;
      if (event.target.checked) {
        this.selected = this.questions.map(item => item.id);
        for (i; i < cbs.length; i++) {
          if (cbs[i].type == 'checkbox') {
            cbs[i].checked = true;
          }
        }
      } else {
        this.selected = [];
        for (i; i < cbs.length; i++) {
          if (cbs[i].type == 'checkbox') {
            cbs[i].checked = false;
          }
        }
      }
    },
    deleteQuestion(id, name) {
      Swal.fire({
        title: "O'chirasizmi?",
        html: `<b>${name}</b> ni o'chirmoqchimisiz?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: "Ha o'chiraman",
        cancelButtonText: "Yo'q hozir emas"
      }).then((result) => {
        if (result.isConfirmed) {
          this.$axios.post('auth/deleteQuestion', {
            id: id
          }).then((response) => {
            this.SwalMixin(response.data.data.message)
            this.getQuestions()
          }).catch((error) => {
            this.SwalMixin(error.response.data.message, 'error')
          });
        }
      })
    },
  }
}
</script>

解決方案7
 0  2011-08-30 23:57:17

標簽名稱是開始 html 標簽的位，例如<input所以.getElementsByTagName ( "link" )應該是.getElementsByTagName ( "input" )如果你只想要name='link'那么if(bxs.name =="link") { ... change the checked }

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript 過濾表然后 select 所有復選框 嘗試在Javascript中選擇單個HTML表中的所有復選框 如何使用JavaScript從表中選擇所有復選框 選擇表JQuery中的所有復選框 選擇所有復選框…以及javascript和rails Javascript：按類別名稱選中所有復選框 嵌套“全選”復選框的Javascript Select Angular/ JavaScript 中的所有復選框 選擇 Bootstrap 表中所有頁面中的所有復選框 select 的復選框 angular 底漆表中的所有復選框
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM