すべての項目のチェックボックス

-2

こんにちは私は次のコードを持っています。これは1つの行に対してのみ機能します。私はこれがすべての行のために動作する必要があります&また、私はトップのチェックボックスを選択した場合、テーブルのすべての項目を表示するすべてのチェックボックスを選択する必要があります。すべての項目のチェックボックス

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="en-us" http-equiv="Content-Language" /> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Quotation New Design</title> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
    <script type="text/javascript" > 
      function valueChanged() 
      { 
       if($(".checkezspeedkit").is(":checked")) 
        $(".qtyezspeedkit ").show(); 
       else 
        $(".qtyezspeedkit").hide(); 
      } 
    </script> 

    <style type="text/css"> 
      .qtyezspeedkit { 
      display:none; 
      } 
      .optionezspeedkit{ 
      display:none; 
      } 
      .qtyezspeedkitbluetooth{ 
      display:none; 
      } 
      .optionezspeedkitbluetooth{ 
      display:none; 
      } 
    </style>  
</head> 

<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <h4>Checkbox Test</h4> 
     <div class="table-responsive"> 
       <table id="mytable" class="table table-bordred table-striped"> 
        <thead> 
         <th><input type="checkbox" id="checkall" /></th> 
         <th>Name</th> 
         <th>Qty</th> 
         <th>Option</th> 
        </thead> 
    <tbody> 
      <tr> 
        <td><input type="checkbox" class="checkezspeedkit" name="chkezspeedkit" onchange="valueChanged()"/></td> 
        <td>EZSpeed Kit</td> 
        <td> 
         <select name="Select1" style="width: 50px" class="qtyezspeedkit" > 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </td> 
        <td> 
         <select name="Select2" style="width: 137px" class="qtyezspeedkit"> 
          <option>Please select</option> 
          <option>Required</option> 
          <option>Option</option> 
         </select> 
        </td> 
      </tr> 
      <tr> 
        <td><input type="checkbox" class="checkezspeedkitbluetooth" name="chkezspeedkitbluetooth" onchange="valueChanged()"/></td> 
        <td>EZSpeed Kit - Bluetooth</td> 
        <td> 
         <select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" > 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </td> 
        <td> 
         <select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" > 
          <option>Please select</option> 
          <option>Required</option> 
          <option>Option</option> 
         </select> 
        </td> 
      </tr>   
      <tr> 
        <td><input type="checkbox" class="checkezspeedkitwifi" name="chkezspeedkitbluetooth" onchange="valueChanged()"/></td> 
        <td>EZSpeed Kit - Wi-Fi</td> 
        <td> 
         <select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" > 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </td> 
        <td> 
         <select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" > 
          <option>Please select</option> 
          <option>Required</option> 
          <option>Option</option> 
         </select> 
        </td> 
      </tr> 
      <tr> 
        <td><input type="checkbox" class="checkezenergykit" name="chkezspeedkitbluetooth" onchange="valueChanged()"/></td> 
        <td>EZEnergy Kit</td> 
        <td> 
         <select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" > 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </td> 
        <td> 
         <select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" > 
          <option>Please select</option> 
          <option>Required</option> 
          <option>Option</option> 
         </select> 
        </td> 
      </tr>    
      <tr> 
        <td><input type="checkbox" class="checkezenergykitbluetooth" name="chkezspeedkitbluetooth" onchange="valueChanged()"/></td> 
        <td>EZEnergy Kit - Bluetooth</td> 
        <td> 
         <select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" > 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </td> 
        <td> 
         <select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" > 
          <option>Please select</option> 
          <option>Required</option> 
          <option>Option</option> 
         </select> 
        </td> 
      </tr> 
      <tr> 
        <td><input type="checkbox" class="checkezenergykitwifi" name="chkezspeedkitbluetooth" onchange="valueChanged()"/></td> 
        <td>EZEnergy Kit - Wi-Fi</td> 
        <td> 
         <select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" > 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </td> 
        <td> 
         <select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" > 
          <option>Please select</option> 
          <option>Required</option> 
          <option>Option</option> 
         </select> 
        </td> 
      </tr>   
    </tbody> 
</table> 
     </div> 
    </div> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

出典

2016-12-08 shumonira

これはPHPの関連性がわかりません... –

これは、各チェックボックスに特別なクラスを割り当てることで簡単に行うことができます。私の場合、私は "checkboxitem"を割り当てました。次に、jQueryを使用して、クラスが割り当てられている各要素のcheckedプロパティを割り当てるJavaScriptコードを作成しました。 https://jsfiddle.net/t7tpzoku/

HTML：：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <h4>Checkbox Test</h4> 
     <div class="table-responsive"> 
       <table id="mytable" class="table table-bordred table-striped"> 
        <thead> 
         <th><input type="checkbox" id="checkall" /></th> 
         <th>Name</th> 
         <th>Qty</th> 
         <th>Option</th> 
        </thead> 
    <tbody> 
      <tr> 
        <td><input type="checkbox" class="checkezspeedkit checkboxitem" name="chkezspeedkit" /></td> 
        <td>EZSpeed Kit</td> 
        <td> 
         <select name="Select1" style="width: 50px" class="qtyezspeedkit" > 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </td> 
        <td> 
         <select name="Select2" style="width: 137px" class="qtyezspeedkit"> 
          <option>Please select</option> 
          <option>Required</option> 
          <option>Option</option> 
         </select> 
        </td> 
      </tr> 
      <tr> 
        <td><input type="checkbox" class="checkezspeedkitbluetooth checkboxitem" name="chkezspeedkitbluetooth" /></td> 
        <td>EZSpeed Kit - Bluetooth</td> 
        <td> 
         <select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" > 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </td> 
        <td> 
         <select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" > 
          <option>Please select</option> 
          <option>Required</option> 
          <option>Option</option> 
         </select> 
        </td> 
      </tr>   
      <tr> 
        <td><input type="checkbox" class="checkezspeedkitwifi checkboxitem" name="chkezspeedkitbluetooth" /></td> 
        <td>EZSpeed Kit - Wi-Fi</td> 
        <td> 
         <select name="Select1" style="width: 50px" class="qtyezspeedkitwifi" > 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </td> 
        <td> 
         <select name="Select2" style="width: 137px" class="optionezspeedkitwifi" > 
          <option>Please select</option> 
          <option>Required</option> 
          <option>Option</option> 
         </select> 
        </td> 
      </tr> 
      <tr> 
        <td><input type="checkbox" class="checkezenergykit checkboxitem" name="chkezspeedkitbluetooth" /></td> 
        <td>EZEnergy Kit</td> 
        <td> 
         <select name="Select1" style="width: 50px" class="qtyezenergykit" > 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </td> 
        <td> 
         <select name="Select2" style="width: 137px" class="optionezenergykit" > 
          <option>Please select</option> 
          <option>Required</option> 
          <option>Option</option> 
         </select> 
        </td> 
      </tr>    
      <tr> 
        <td><input type="checkbox" class="checkezenergykitbluetooth checkboxitem" name="chkezspeedkitbluetooth" /></td> 
        <td>EZEnergy Kit - Bluetooth</td> 
        <td> 
         <select name="Select1" style="width: 50px" class="qtyezenergykitbluetooth" > 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </td> 
        <td> 
         <select name="Select2" style="width: 137px" class="optionezenergykitbluetooth" > 
          <option>Please select</option> 
          <option>Required</option> 
          <option>Option</option> 
         </select> 
        </td> 
      </tr> 
      <tr> 
        <td><input type="checkbox" class="checkezenergykitwifi checkboxitem" name="chkezspeedkitbluetooth" /></td> 
        <td>EZEnergy Kit - Wi-Fi</td> 
        <td> 
         <select name="Select1" style="width: 50px" class="qtyezenergykitwifi" > 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </td> 
        <td> 
         <select name="Select2" style="width: 137px" class="optionezenergykitwifi" > 
          <option>Please select</option> 
          <option>Required</option> 
          <option>Option</option> 
         </select> 
        </td> 
      </tr>   
    </tbody> 
</table> 
     </div> 
    </div> 
</div>

はJavaScript：

$(function() 
{ 
$("#checkall").on("click", function() 
{ 
    $(".checkboxitem").prop("checked", $("#checkall").prop("checked")); 
    $(".checkboxitem").trigger("change"); 
}); 

$(".checkboxitem").on("change", function() 
{ 
    var className1 = "." + $(this).attr("class").split(" ")[0].replace("check", "qty"); 
    var className2 = "." + $(this).attr("class").split(" ")[0].replace("check", "option"); 
       if($(this).is(":checked")) 
       { 
        $(className1).show(); 
        $(className2).show(); 
       } 
       else 
       { 
        $(className1).hide(); 
        $(className2).hide(); 
       } 
}); 
});

出典

2016-12-08 21:51:53 vbguyny

jsfiddleでは動作せず、別途動作しません。私は試しました... – shumonira

@ shumonira：私は私の答えを更新しました。まず、私はあなたの問題を100％理解していませんでした。なぜなら、それはあまり明確ではなかったからです。次に、ドロップダウンリストごとに同じCSSクラスを使用することで問題が発生します。一度すべての問題を修正したら、私はあなたが今探しているものだと思う。そうでない場合は、あなたがしようとしていることを明確にしてください。 – vbguyny

この関数は、クラス "checkboxitem" とすべての項目をチェックし

は、実施例を参照してください。 valがtrueの場合jqueryは、クラスのすべてのチェックボックスでattrを "checked"に設定し、 "val"がfalseの場合にfalseに設定します。

function check_all(val){ 
       if(val){ 
        $(".checkboxitem").attr("checked", true); 
       }else{ 
        $(".checkboxitem").attr("checked", false); 
       } 
      }

はまた、あなたはあなたが行うことができ、より汎用的になりたい場合：

空の場合は、「class_to_check」が設定されている

function check_all(val,class_to_check = "checkboxitem"){ 
        if(val){ 
         $("."+class_to_check).attr("checked", true); 
        }else{ 
         $("."+class_to_check).attr("checked", false); 
        } 
       }

。悪い英語で申し訳ありません。

出典

2016-12-09 16:57:18

すべての項目のチェックボックス

答えて

関連する問題