有没有更好的方法来设置输入检查属性?

时间:2016-05-02 21:17:19

标签: javascript php

我的第一个想法是设置输入checked =“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;
        }
    }

这可以按预期工作,但似乎有点矫枉过正。我只是想知道在查看输入类型时是否有更复杂的方法或者我错过了什么?

2 个答案:

答案 0 :(得分:1)

这是您的改进版本。基本上你只需要在消息的每一行之前为所有复选框使用相同的类,这样你就可以使用jQuery.each()函数来选择all并根据你的主复选框来切换checked属性,它具有id&#34; setchecked&#34;

希望得到这个帮助,

KD质量

&#13;
&#13;
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;
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你可以做这样的事情

// 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>