时间戳

首页 > 解决方案 > 如何使用 javascript 在每张卡片中选择 1 个复选框

javascript - 如何使用 javascript 在每张卡片中选择 1 个复选框

问题描述

Hye，我需要来自 stackoverflow 社区的帮助，我有 2 张卡，每张卡都有 1 个以上的复选框。那么我如何管理每张卡只能使用 javascript 选择 1 个复选框。抱歉，我是 javascipt 的新手。这是我的html代码。

  <div class="d-flex justify-content-center" id = "card1">
    <div class="card" style="width: 50rem">
      <form method="POST" action="surveyuserprocess2.php">

        <div class="card-header">
          UNSAFE ACT / TINDAKAN TIDAK SELAMAT
        </div>
        <div class="card-body" id="card7">
          <div class="custom-control custom-checkbox custom-control-inline" id="c1">
            <input type="checkbox"class="custom-control-input" id="customchk1" name="Act" value="UA01">
            <label class="custom-control-label" for="customchk1"><b>PEE Violation</b><br>Tidak Memakai PPE Yang Lengkap</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c2">
            <input type="checkbox" class="custom-control-input" id="customchk2" name="Act" value="UA02">
            <label class="custom-control-label" for="customchk2"><b>Ignoring Safety Signboard</b><br>Mengingkari Tanda Keselamatan</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c3">
            <input type="checkbox" class="custom-control-input" id="customchk3" name="Act" value="UA03">
            <label class="custom-control-label" for="customchk3"><b>Rule Violation</b><br>Melanggar Peraturan</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c4">
            <input type="checkbox" class="custom-control-input" id="customchk4" name="Act" value="UA04">
            <label class="custom-control-label" for="customchk4"><b>Wrong Tool / Equipment / Machinery</b><br>Peralatan / Alatan / Mesin Salah</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c5">
            <input type="checkbox" class="custom-control-input" id="customchk5"name="Act" value="UA05">
            <label class=custom-control-label for="customchk5"><b>Improper Material Handling</b><br>Kendalian Bahan Tidak Sempurna</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c6">
            <input type="checkbox" class="custom-control-input" id="customchk6" name="Act" value="UA06">
            <label class="custom-control-label" for="customchk6"><b>Use Faulty / Equipment / Vechile</b><br>Menggunakan Peralatan / Alatan / Kenderaan Rosak</br></label>
          </div>
          <div class="custom-control custom-checkbox " id="c7">
            <input type="checkbox" class="custom-control-input" id="customchk7" name="Act" value="UA07">
            <label class="custom-control-label" for="customchk7"><b>Positive Findings/Other. Please Specify</b><br>Penemuan Positif/Lain-Lain. Sila Nyatakan:</br></label>
            <textarea class="form-control" name="ActOther" rows="5" id="Others1" placeholder="Fill in the blank"></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-center" id = "card2">
      <div class="card" style = "width: 50rem">
        <div class="card-header" id="card8">
          UNSAFE CONDITION / KEADAAN TIDAK SELAMAT
        </div>
        <div class="card-body" ;>
          <div class="custom-control custom-checkbox custom-control-inline" id="c8">
            <input type="checkbox"class="custom-control-input" id="customchk8" name="UCondition" value="UC01">
            <label class="custom-control-label" for="customchk8"><b>Poor Housekeeping</b><br>Tidak Kemas</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c9">
            <input type="checkbox" class="custom-control-input" id="customchk9" name="UCondition" value="UC02">
            <label class="custom-control-label" for="customchk9"><b>Noise Hazard</b><br>Hazard Bunyi Bising</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c10">
            <input type="checkbox" class="custom-control-input" id="customchk10" name="UCondition" value="UC03">
            <label class="custom-control-label" for="customchk10"><b>Unstable Condition</b><br>Keadaan Tidak Seimbang</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c11">
            <input type="checkbox" class="custom-control-input" id="customchk11" name="UCondition" value="UC04">
            <label class="custom-control-label" for="customchk11"><b>Improper / Faulty Equipment</b><br>Peralatan Tidak Sesuai / Rosak</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c12">
            <input type="checkbox" class="custom-control-input" id="customchk12"name="UCondition" value="UC05">
            <label class=custom-control-label for="customchk12"><b>Biological Hazard</b><br>Hazard Biologi</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c13">
            <input type="checkbox" class="custom-control-input" id="customchk13" name="UCondition" value="UC06">
            <label class="custom-control-label" for="customchk13"><b>Fire / Explosion Hazard</b><br>Hazard Kebakaran / Letupan</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c14">
            <input type="checkbox" class="custom-control-input" id="customchk14" name="UCondition" value="UC07">
            <label class="custom-control-label" for="customchk14"><b>Falling Hazard</b><br>Hazard Jatuh</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c15">
            <input type="checkbox" class="custom-control-input" id="customchk15" name="UCondition" value="UC08">
            <label class="custom-control-label" for="customchk15"><b>Electrical Hazard</b><br>Hazard Elektrik</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c16">
            <input type="checkbox" class="custom-control-input" id="customchk16" name="UCondition" value="UC09">
            <label class="custom-control-label" for="customchk16"><b>Physical Damage</b><br>Kerosakan Fizikal</br></label>
          </div>
          <div class="custom-control custom-checkbox " id="c17">
            <input type="checkbox" class="custom-control-input" id="customchk17" name="UCondition" value="UC10">
            <label class="custom-control-label" for="customchk17"><b>Tripping / Slipping Hazard</b><br>Hazard Tersadung / Gelincir</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c18">
            <input type="checkbox" class="custom-control-input" id="customchk18" name="UCondition" value="UC11">
            <label class="custom-control-label" for="customchk18"><b>Biological Hazard Safety Equipment</b><br>Gagal Menyediakan Alat Keselamatan</br></label>
          </div>
          <div class="custom-control custom-checkbox " id="c19">
            <input type="checkbox" class="custom-control-input" id="customchk19" name="UCondition" value="UC12">
            <label class="custom-control-label" for="customchk19"><b>Inadequate / Incorrect Work Procedure</b><br>Prosedur Kerja Salah / Tidak Mencukupi</br></label>
          </div>
          <div class="custom-control custom-checkbox " id="c20">
            <input type="checkbox" class="custom-control-input" id="customchk20" name="UCondition" value="UC13">
            <label class="custom-control-label" for="customchk20"><b>Positive Findings/Other. Please Specify</b><br>Penemuan Positif/Lain-Lain. Sila Nyatakan:</br></label>
            <textarea class="form-control" Name="ConditionOther" rows="5" id="Others2" placeholder="Fill in the blank"></textarea>
          </div>
        </div>
      </div>
    </div>

任何人都可以展示如何做到这一点？我看过很多教程，但仍然无法解决问题

非常感谢你的好意。

标签： javascript

解决方案

您可以按照以下方法： 

$(function() {
  $('#card1 input:checkbox').click(function(){
    let group = "input:checkbox[name='" + $(this).attr("name") + "']";;
    $(group).prop('checked', false);
    $(this).prop('checked', true);
  });
  
  $('#card2 input:checkbox').click(function(){
    let group = "input:checkbox[name='" + $(this).attr("name") + "']";;
    $(group).prop('checked', false);
    $(this).prop('checked', true);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-center" id = "card1">
    <div class="card" style="width: 50rem">
      <form method="POST" action="surveyuserprocess2.php">

        <div class="card-header">
          UNSAFE ACT / TINDAKAN TIDAK SELAMAT
        </div>
        <div class="card-body" id="card7">
          <div class="custom-control custom-checkbox custom-control-inline" id="c1">
            <input type="checkbox"class="custom-control-input" id="customchk1" name="Act" value="UA01">
            <label class="custom-control-label" for="customchk1"><b>PEE Violation</b><br>Tidak Memakai PPE Yang Lengkap</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c2">
            <input type="checkbox" class="custom-control-input" id="customchk2" name="Act" value="UA02">
            <label class="custom-control-label" for="customchk2"><b>Ignoring Safety Signboard</b><br>Mengingkari Tanda Keselamatan</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c3">
            <input type="checkbox" class="custom-control-input" id="customchk3" name="Act" value="UA03">
            <label class="custom-control-label" for="customchk3"><b>Rule Violation</b><br>Melanggar Peraturan</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c4">
            <input type="checkbox" class="custom-control-input" id="customchk4" name="Act" value="UA04">
            <label class="custom-control-label" for="customchk4"><b>Wrong Tool / Equipment / Machinery</b><br>Peralatan / Alatan / Mesin Salah</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c5">
            <input type="checkbox" class="custom-control-input" id="customchk5"name="Act" value="UA05">
            <label class=custom-control-label for="customchk5"><b>Improper Material Handling</b><br>Kendalian Bahan Tidak Sempurna</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c6">
            <input type="checkbox" class="custom-control-input" id="customchk6" name="Act" value="UA06">
            <label class="custom-control-label" for="customchk6"><b>Use Faulty / Equipment / Vechile</b><br>Menggunakan Peralatan / Alatan / Kenderaan Rosak</br></label>
          </div>
          <div class="custom-control custom-checkbox " id="c7">
            <input type="checkbox" class="custom-control-input" id="customchk7" name="Act" value="UA07">
            <label class="custom-control-label" for="customchk7"><b>Positive Findings/Other. Please Specify</b><br>Penemuan Positif/Lain-Lain. Sila Nyatakan:</br></label>
            <textarea class="form-control" name="ActOther" rows="5" id="Others1" placeholder="Fill in the blank"></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-center" id = "card2">
      <div class="card" style = "width: 50rem">
        <div class="card-header" id="card8">
          UNSAFE CONDITION / KEADAAN TIDAK SELAMAT
        </div>
        <div class="card-body" ;>
          <div class="custom-control custom-checkbox custom-control-inline" id="c8">
            <input type="checkbox"class="custom-control-input" id="customchk8" name="UCondition" value="UC01">
            <label class="custom-control-label" for="customchk8"><b>Poor Housekeeping</b><br>Tidak Kemas</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c9">
            <input type="checkbox" class="custom-control-input" id="customchk9" name="UCondition" value="UC02">
            <label class="custom-control-label" for="customchk9"><b>Noise Hazard</b><br>Hazard Bunyi Bising</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c10">
            <input type="checkbox" class="custom-control-input" id="customchk10" name="UCondition" value="UC03">
            <label class="custom-control-label" for="customchk10"><b>Unstable Condition</b><br>Keadaan Tidak Seimbang</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c11">
            <input type="checkbox" class="custom-control-input" id="customchk11" name="UCondition" value="UC04">
            <label class="custom-control-label" for="customchk11"><b>Improper / Faulty Equipment</b><br>Peralatan Tidak Sesuai / Rosak</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c12">
            <input type="checkbox" class="custom-control-input" id="customchk12"name="UCondition" value="UC05">
            <label class=custom-control-label for="customchk12"><b>Biological Hazard</b><br>Hazard Biologi</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c13">
            <input type="checkbox" class="custom-control-input" id="customchk13" name="UCondition" value="UC06">
            <label class="custom-control-label" for="customchk13"><b>Fire / Explosion Hazard</b><br>Hazard Kebakaran / Letupan</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c14">
            <input type="checkbox" class="custom-control-input" id="customchk14" name="UCondition" value="UC07">
            <label class="custom-control-label" for="customchk14"><b>Falling Hazard</b><br>Hazard Jatuh</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c15">
            <input type="checkbox" class="custom-control-input" id="customchk15" name="UCondition" value="UC08">
            <label class="custom-control-label" for="customchk15"><b>Electrical Hazard</b><br>Hazard Elektrik</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c16">
            <input type="checkbox" class="custom-control-input" id="customchk16" name="UCondition" value="UC09">
            <label class="custom-control-label" for="customchk16"><b>Physical Damage</b><br>Kerosakan Fizikal</br></label>
          </div>
          <div class="custom-control custom-checkbox " id="c17">
            <input type="checkbox" class="custom-control-input" id="customchk17" name="UCondition" value="UC10">
            <label class="custom-control-label" for="customchk17"><b>Tripping / Slipping Hazard</b><br>Hazard Tersadung / Gelincir</br></label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline" id="c18">
            <input type="checkbox" class="custom-control-input" id="customchk18" name="UCondition" value="UC11">
            <label class="custom-control-label" for="customchk18"><b>Biological Hazard Safety Equipment</b><br>Gagal Menyediakan Alat Keselamatan</br></label>
          </div>
          <div class="custom-control custom-checkbox " id="c19">
            <input type="checkbox" class="custom-control-input" id="customchk19" name="UCondition" value="UC12">
            <label class="custom-control-label" for="customchk19"><b>Inadequate / Incorrect Work Procedure</b><br>Prosedur Kerja Salah / Tidak Mencukupi</br></label>
          </div>
          <div class="custom-control custom-checkbox " id="c20">
            <input type="checkbox" class="custom-control-input" id="customchk20" name="UCondition" value="UC13">
            <label class="custom-control-label" for="customchk20"><b>Positive Findings/Other. Please Specify</b><br>Penemuan Positif/Lain-Lain. Sila Nyatakan:</br></label>
            <textarea class="form-control" Name="ConditionOther" rows="5" id="Others2" placeholder="Fill in the blank"></textarea>
          </div>
        </div>
      </div>
    </div>

如果您有任何进一步的疑问，请随时告诉我。

推荐阅读