Question

在此先感谢您的帮助。

我正在尝试搜索以下所有ID，以查看用户是否选择了数据。

<input id=\"".$row['childName']."\" type=\"checkbox\" name=\"foodData[]\"  value=\""$row['foodCalories']"\"><label> If this is selected </label>

<label><input id=\"".$row['careHome']."\" type=\"checkbox\" name=\"lifestyle\"  value=\"".$row['sportActivities']."\"\>this should be checked too.. </label>

<script> function lastResort(){
    var x = document.getElementById(\"".$row['childName']."\).value; \\this is unrecognised

    var y = document.getElementById(\"".$row['careHome']."\"); \\ unrecognised

    (... function to checkboxes..) <-- this part works
} </script>;

我还发现，如果我妥协并为所有值保留相同的ID（如word = \"eat\"），则它仅对结果的第一行运行该函数。

Answer 1

首先，我建议您不要以字符串形式输出。尝试使用简单的视图方法渲染事物。它使您可以更轻松地编辑HTML，并防止出现所有未加引号的字符等错误。

class Controller 
{
    public function makePartial($file, $vars = []) 
    {
        extract($vars);
        ob_start();
           include($file);
        $output = ob_get_clean();
        return $output;
    }
    public function render() 
    {
        return '';
    }
}

然后在您看来，您将拥有类似的东西

view.html

<input id="<?= $row['childName'] ?>" type="checkbox" name="foodData[]"  value="<?= $row['foodCalories'] ?>"\><label> If this is selected </label>

<label><input id="<?= $row['careHome'] ?>" type="checkbox" name="lifestyle"  value="<?= $row['sportActivities'] ?>"\>this should be checked too.. </label>

<script>
    function lastResort(){
        var x = document.getElementById("<?= $row['childName']?> ").value; \\this is unrecognised

    var y = document.getElementById("<?= $row['careHome']?>").value; \\ unrecognised

    (... function to checkboxes..) <-- this part works
};
</script>

您可以通过扩展控制器来渲染

class foodController extends Controller 
{
    protected function getRows() 
    {
       // magic to get rows
       return $rows;
    }
    public function render() 
    {
       $output = [];
       $rows = $this->getRows();
       foreach($rows as $row) {
          $output[] = $this->makePartial('view.html', ['row' => $row]);
       }
       return implode('', $output);
    }
}

最终会得到类似

的输出

<input id="childName" type="checkbox" name="foodData[]"  value="250"/><label> If this is selected </label>

<label><input id="careHome" type="checkbox" name="lifestyle"  value="discus"/>this should be checked too.. </label>
<button id="clickme">Click me</button>
<script>
    function lastResort(){
        var x = document.getElementById("childName").value; //this is unrecognised

        var y = document.getElementById("careHome").value; //unrecognised
        console.log(x, y);
    };
    document.getElementById('clickme').addEventListener('click', lastResort);
</script>

通过将渲染流分离为单个id，或将它们存储在单独的数组中，就可以完成所需的操作。

我建议将ID存储在单独的数组中，并在单独的视图中呈现javascript。

row.html

<input id="<?= $childName ?>" type="checkbox" name="foodData[]"  value="<?= $foodCalories ?>"\><label> If this is selected </label>

<label><input id="<?= $careHome ?>" type="checkbox" name="lifestyle"  value="<?= $sportActivities ?>"\>this should be checked too.. </label>

javascript.html

<script>
    function lastResort(){
         <?php foreach($rows as $row): ?>
             if(document.getElementById('<?=$row['childName']?>').checked) {
                   document.getElementById('<?=$row['careHome']?>').checked = true;
             }
             else {
                   document.getElementById('<?=$row['careHome']?>').checked = false;
             }
         <?php endforeach; ?>
    }
};
</script>

您可以使用哪个进行渲染

class foodController extends Controller 
{
    protected function getRows() 
    {
       // magic to get rows
       return $rows;
    }
    public function render() 
    {
       $output = [];
       $rows = $this->getRows();
       foreach($rows as $row) {
          $output[] = $this->makePartial('row.html', $row);
       }
       $output[] = $this->makePartial('javascript.html', $rows);
       return implode('', $output);
    }
}

哪个会给出类似的输出

<input id="childName1" type="checkbox" name="foodData[]"  value="250"/><label> If this is selected </label>

<label><input id="careHome1" type="checkbox" name="lifestyle"  value="discus"/>this should be checked too.. </label>
<BR/>
<input id="childName2" type="checkbox" name="foodData[]"  value="250"/><label> If this is selected </label>

<label><input id="careHome2" type="checkbox" name="lifestyle"  value="discus"/>this should be checked too.. </label>
<BR/>
<input id="childName3" type="checkbox" name="foodData[]"  value="250"/><label> If this is selected </label>

<label><input id="careHome3" type="checkbox" name="lifestyle"  value="discus"/>this should be checked too.. </label>
<BR/>
<input id="childName4" type="checkbox" name="foodData[]"  value="250"/><label> If this is selected </label>

<label><input id="careHome4" type="checkbox" name="lifestyle"  value="discus"/>this should be checked too.. </label>
<BR/>
<button id="clickme">Click me</button>
<script>
    function lastResort(){
        if(document.getElementById('childName1').checked) {
            document.getElementById('careHome1').checked = true;
        }
        else {
            document.getElementById('careHome1').checked = false;
        }
        if(document.getElementById('childName2').checked) {
            document.getElementById('careHome2').checked = true;
        }
        else {
            document.getElementById('careHome2').checked = false;
        }
        if(document.getElementById('childName3').checked) {
            document.getElementById('careHome3').checked = true;
        }
        else {
            document.getElementById('careHome3').checked = false;
        }
        if(document.getElementById('childName4').checked) {
            document.getElementById('careHome4').checked = true;
        }
        else {
            document.getElementById('careHome4').checked = false;
        }
    };
    document.getElementById('clickme').addEventListener('click', lastResort);
</script>

如果输入标签中的ID由php / mysql输出生成，如何将ID传递给JavaScript（getElementByID）？

1 个答案: