無法在單選按鈕中設置選中的屬性（表格中的單選按鈕）

Question

我試過將設置單選按鈕選中爲checked="checked"但是，這似乎不起作用。 我試過使用

1. $（id_radio）.prop（'checked'，true）;
2. document.getElementById（「id_radio」）。checked = true;
3. document.getElementById（「id_radio」）。checked = true;
4. document.getElementById（「id_radio」）。checked;
5. $（id_radio）.attr（'checked'，checked）;

但他們都不似乎正在改變的checked的屬性checked="checked"

下面是我的代碼 js_file.js

$(document).ready(function(){ 
$("document").on("click",".class_radio3",function(){ 

    var id_radio=$(this).attr('value'); 
    $(id_radio).prop('checked',true); 
    console.log(id_radio); 
}); 
}); 

我創建表

代碼

<br> 
    <p class="uk-text-primary uk-text-bold"><u> General Message </u></p> 
    <table class="uk-table uk-border-rounded uk-grid-width-* uk-panel-box uk-text-justify" border="1"> 
     <!--create top table --> 
     <tr> <!--tr defines a row --> <!-- define row 1 --> 
      <th class="uk-width-1-10"> Recipient </th> <!-- th defines a header cell--> 
      <th class="uk-width-1-3"> Message </th> 
      <th class="uk-width-1-10"> Action </th> 
      <th class="uk-width-1-10"> Default message </th> 
     </tr> 
     <!-- row 2 : display results onwards and creates dynamically --> 
     <!-- input fields at the bottom --> 


      <?php 
       include "../connect.php"; 
       $get_data2admin = $db->query("SELECT ID,message,user FROM test_table_1 WHERE user='General'"); 


      if($get_data2admin->num_rows >0){ //if selected rows is more than zero 
       while($row_msg = $get_data2admin->fetch_assoc()){ 

        $row_msg_id=$row_msg['ID']; //$row_msg['ID'] directly using it wont display in id tag attribute 
        echo "<tr>"; 
        echo "<td>".$row_msg['user']."</td>"; 
        echo "<td>".$row_msg['message']. "</td>"; 

        ?> 

        <td><a href="#" id="<?php echo $row_msg_id; ?>" class="delete_button uk-text-danger">Delete</a></td> 

        <?php 
        if($row_msg['user']=='General'){ 
         echo "<td>"."<input class='class_radio3' type='radio' name='name_radio2' value='$row_msg_id' checked=''/>"."</td>"; 

        } 
        else{ 
         echo "<td>"."-"."</td>"; 
        }; 

        echo "</tr>"; 
       } 
      } 

     ?> 
</table> 

可能是什麼問題？任何見解/解決方案？作爲PhP的初學者，任何建議都會有所幫助。謝謝

注 其打印出選擇，所以我不認爲它的選擇問題

阿里納斯的權利ID：如果我嘗試使用e.preventDefault在

$("document").on("click",".class_radio3",function(e){ 
e.preventDefault(); 

另一個問題單選按鈕變成不可點擊。那爲什麼？

更新1：什麼是問題

Answer 1

我認爲有幾個問題在這裏...圖片一個是隻有一個無線電可以爲每個被檢查組 - 即具有相同「名稱」的無線電。 checked=""與checked="checked"相同 - 完全沒有屬性是「未選中」狀態。

div { 
 
    width: 50%; 
 
    float: left; 
 
}

<div> 
 
    <h1>Group 1</h1> 
 
    <p><input type="radio" name="group1" value="1" checked="checked" />1</p> 
 
    <p><input type="radio" name="group1" value="2" checked="checked" />2</p> 
 
    <p><input type="radio" name="group1" value="3" checked="checked" />3</p> 
 
    <p><input type="radio" name="group1" value="4" checked="checked" />4</p> 
 
    <p><input type="radio" name="group1" value="5" checked="checked" />5</p> 
 
</div> 
 
<div> 
 
    <h1>Group 2</h1> 
 
    <p><input type="radio" name="group2" value="1" checked="checked" />1</p> 
 
    <p><input type="radio" name="group2" value="2" />2</p> 
 
    <p><input type="radio" name="group2" value="3" />3</p> 
 
    <p><input type="radio" name="group2" value="4" />4</p> 
 
    <p><input type="radio" name="group2" value="5" />5</p> 
 
</div>

其次，在你的代碼，你說（如果我沒有理解什麼PHP正確輸出）的onclick此輸入（收音機），集東西用的ID是與我的值的屬性「檢查」爲true相同。身份證號碼是a標籤。 a標記沒有此選中的屬性。請參閱下文，我將其背景設置爲紅色（通過課程），而不是。

默認情況下，單擊按鈕時將檢查單選按鈕，因此您不需要重複此默認行爲。

我還更新了代碼，以便在輸入值發生更改時作出響應，與點擊文檔並且目標是輸入時相反。傾聽範圍比範圍更廣的範圍稍微小一些。您使用的方法曾被稱爲jQuery中的「實時」偵聽器，並且更適合於JS添加和刪除您在頁面上偵聽的元素;在你的情況下，PHP正在渲染它們，所以我們不需要它。

此外，jQuery選擇器需要一個#來指示id，.來指示類，如果沒有這些選擇器，它會認爲它是一個標記。看到下面我在追加#來選擇帶有ID的a。

// This is listening for any radio buttons who were clicked, instead of any clicks on the document (it's a little more efficient) 
 
$("input[type=radio]").on("change", function() { 
 

 
    // get the other radio buttons in this group 
 
    var $group = $('input[name=' + $(this).attr('name') + ']'); 
 

 
    // Go through the group and if the input is checked, add the class to the corresponding element, otherwise, remove it 
 
    $group.each(function() { 
 
    var id_radio = "#" + $(this).attr('value'); 
 
    if ($(this).is(":checked")) { 
 
     $(id_radio).addClass("radio-is-checked"); 
 
    } else { 
 
     $(id_radio).removeClass("radio-is-checked"); 
 
    } 
 
    }); 
 

 

 
});

.radio-is-checked { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="uk-text-primary uk-text-bold"><u> General Message </u> 
 
</p> 
 
<table class="uk-table uk-border-rounded uk-grid-width-* uk-panel-box uk-text-justify" border="1"> 
 
    <!--create top table --> 
 
    <tr> 
 
    <!--tr defines a row --> 
 
    <!-- define row 1 --> 
 
    <th class="uk-width-1-10">Recipient</th> 
 
    <!-- th defines a header cell--> 
 
    <th class="uk-width-1-3">Message</th> 
 
    <th class="uk-width-1-10">Action</th> 
 
    <th class="uk-width-1-10">Default message</th> 
 
    </tr> 
 
    <!-- row 2 : display results onwards and creates dynamically --> 
 
    <!-- input fields at the bottom --> 
 

 
    <tr> 
 
    <td>$row_msg['user']</td> 
 
    <td>$row_msg['message']</td> 
 
    <!-- Since the radio in this row is checked by default, also apply the corresponding class --> 
 
    <td><a href="#" id="one" class="delete_button uk-text-danger radio-is-checked">Delete</a> 
 
    </td> 
 
    <td> 
 
     <input class='class_radio3' type='radio' name='name_radio2' value='one' checked /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>$row_msg['user']</td> 
 
    <td>$row_msg['message']</td> 
 
    <td><a href="#" id="two" class="delete_button uk-text-danger">Delete</a> 
 
    </td> 
 
    <td> 
 
     <input class='class_radio3' type='radio' name='name_radio2' value='two' /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>$row_msg['user']</td> 
 
    <td>$row_msg['message']</td> 
 
    <td><a href="#" id="three" class="delete_button uk-text-danger">Delete</a> 
 
    </td> 
 
    <td> 
 
     <input class='class_radio3' type='radio' name='name_radio2' value='three' /> 
 
    </td> 
 
    </tr> 
 
</table>

第三，單選按鈕的 「默認」 的行爲成爲檢查。通過做e.preventDefault你取消了這個默認行爲，所以它不會被檢查！

Answer 2

嘗試這個 HTML

if($row_msg['user']=='General'){ 
echo "<td>"."<input id='$row_msg_id' class='class_radio3' type='radio' name='name_radio2' value='$row_msg_id' />"."</td>"; 

         } 

JS

var id_radio=$(this).attr('id'); 
    $('#' + id_radio).prop('checked',true); 

Answer 3

檢查之下，

您可以使用ATTR像下面，但我會建議使用prop

function chk(element) { 
 
    
 
    $(element).attr("checked", "checked"); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label for="age">10</label> 
 
<input type="radio" name="age" value="10" onclick="chk(this);" /> 
 
<label for="age">15</label> 
 
<input type="radio" name="age" value="15" onclick="chk(this);" />