入力チェック属性を設定するより良い方法はありますか？

Question

私の最初の考えは、入力をチェック= "javascript function（）true/false"を設定することでしたか？

私がしようとしているのは、私のフォーラムメールボックスシステムのすべてのチェックボックスを選択することです。

私は受信トレイを表示するためにテーブルを使用しており、すべてを選択するチェックボックスを配置しています。

<form action="" method = "post"> 
<table rules="all"> 
    <tr> 
    <th> 
     <input type="checkbox" id = "setchecked" name="smessgage"value="deleteall" onclick="get_checked()"/> 
    </th> 
    <th>From</th> 
    <th>Subject</th> 
    <th>Date</th> 
</tr> 

は私が

onclick="get_checked() 

が属性をチェックし、他のチェックボックスを設定し、このJavaScript関数を呼び出すために使用します。

<script> 
function get_checked() 
{ 
    if(document.getElementById("setchecked").checked) 
    { 
     for(var i = 0; i < 100;++i) 
     { 
      var check_id = "smessage"+i; 
      if(document.getElementById(check_id)) 
      document.getElementById(check_id).checked = true; 
     } 
    } 
    else 
    { 
     for(var i = 0; i < 100;++i) 
     { 
      var check_id = "smessage"+i; 
      if(document.getElementById(check_id)) 
      document.getElementById(check_id).checked = false; 
     } 
    } 
} 
</script> 

テーブルを設定するPHPは次のよ​​うになります。

$i = 0; 
    while($row = mysqli_fetch_assoc($result)) 
    { 
     if(isset($row['to_']) && $row['to_'] == $_SESSION['user_name']) 
     { 
      $id_ = isset($row['id']) ? $row['id'] : ''; 
      $top_ = isset($row['subject']) ? $row['subject'] : ''; 
      $auth_ = isset($row['from_']) ? $row['from_'] : ''; 
      $date_ = isset($row['date']) ? $row['date'] : ''; 


      echo '<tr id = "cat_" name = "cat_1"> 
      <td style = "margin:0 auto; text-align:center;"><input type="checkbox" id = "smessage'.$i.'" name="smessgage" value="'.$id_.'"/></td> 
      <td style = "margin:0 auto; text-align:center;"><a href = "mail?from='.$auth_.'&mail_id='.$id_.'&mail_name='.$top_.'">'. 
      $auth_.'</a></td> 
      <td style = "margin:0 auto; text-align:center;"><a href = "mail?from='.$auth_.'&mail_id='.$id_.'&mail_name='.$top_.'">'. 
      $top_.'</a></td> 
      <td style = "margin:0 auto; text-align:center;"><a href = "mail?from='.$auth_.'&mail_id='.$id_.'&mail_name='.$top_.'">'. 
      time_elapsed_string($date_,true).'</a></td></tr>'; 
      ++$i; 
     } 
    } 

これは予期したとおりに動作しますが、少し過度のようです。入力タイプを調べているうちにもっと懐疑的なアプローチや欠けているものがあるかどうかを知りたいだけです。

Answer 1

ような何かを行うことができます。基本的には、メッセージの各行の前にすべてのチェックボックスに同じクラスを使用する必要があります.jQuery.each（）関数を使用してすべてを選択し、チェックされたプロパティをメインのチェックボックスに切り替えます。idは "setchecked"です

・ホープこのヘルプ、

KD品質

function checkAll(bx) { 
 
    var cbs = jQuery(".checkbox_class").each(function() { 
 
    jQuery(this).prop('checked', jQuery('#setchecked').prop('checked')); 
 
    }); 
 
} 
 

 
var e = document.getElementById('setchecked'); e.onclick = checkAll;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form action="" method="post"> 
 
    <table rules="all"> 
 
    <tr> 
 
     <th> 
 
     <input type="checkbox" id="setchecked" name="smessgage" value="deleteall" /> 
 
     </th> 
 
     <th>From</th> 
 
     <th>Subject</th> 
 
     <th>Date</th> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="messgage[]" value="message_1" class="checkbox_class" /> 
 
     </td> 
 
     <td>Message 1</td> 
 
     <td>Message 1</td> 
 
     <td>Some Date</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="messgage[]" value="message_2" class="checkbox_class" /> 
 
     </td> 
 
     <td>Message 1</td> 
 
     <td>Message 1</td> 
 
     <td>Some Date</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="messgage[]" value="message_3" class="checkbox_class" /> 
 
     </td> 
 
     <td>Message 1</td> 
 
     <td>Message 1</td> 
 
     <td>Some Date</td> 
 
    </tr> 
 
    </table> 
 
</form>

Answer 2

あなたがここにあなたの改良版であるこの

// The important code 
 
function selectAll(e) { 
 
    var nodes = document.querySelectorAll('form input[type=checkbox]'); 
 
    for(var i = 0; i < nodes.length; i++) { 
 
    nodes[i].checked = e.target.checked; 
 
    }; 
 
} 
 

 
// This is only code to genereate input elements 
 
var form = document.getElementById('foo'); 
 
for (var i = 0; i < 15; i++) { 
 
    var input = document.createElement('input'); 
 
    input.type = "checkbox"; 
 
    form.appendChild(input); 
 
}

<input id="selectall" type="checkbox" onclick="selectAll(event)" /> 
 
<label for="selectall">Select all</label> 
 
<hr /> 
 
<form id="foo"></form>