Checked Checkbox không được cập nhật trong giao diện người dùng

Tôi gặp vấn đề liên quan đến hộp kiểm tra bằng JS.Khi tôi chọn hộp kiểm của JS, có vẻ như chương trình đã được kiểm tra nhưng trong giao diện người dùng không được cập nhật.Checked Checkbox không được cập nhật trong giao diện người dùng

nếu có ai có giải pháp cho điều này

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Check</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
    <script>  
    function getCheckedValue() 
    { 
    return ((document.getElementById("rock").checked)); 

    } 

    function setCheckedValue(toBeChecked){ 
     document.getElementById(toBeChecked).checked="checked"; 
     alert((document.getElementById(toBeChecked).checked)) 
     alert($('#'+toBeChecked).attr('checked')) 
    } 
    </script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
      <h1>What kind/s of music do you listen to?</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <input type="checkbox" class="music" name="music" id="rock" value="rock" > 
     <label for="rock">Rock</label> 
     <input type="button" value="Get" onclick="alert(getCheckedValue())"> 
     <input type="button" value="Set" onclick="setCheckedValue('rock') "> 
    </div> 
</div> 
</body> 
</html>

Nguồn

2012-05-03 s_k_t

Nếu bạn đã tìm thấy một câu trả lời có thể chấp nhận câu hỏi của bạn, [hãy đánh dấu câu trả lời như chấp nhận.] (Http://meta.stackexchange.com/a/5235/171858) –

Tôi đã làm việc sau khi nhận được phản hồi từ tất cả nỗ lực của bạn và mã hoạt động bên dưới.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Check</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
    <script>  
    function getCheckedValue() 
    { 
    return (document.getElementById("rock").checked); 
    //return $('input[name=music]').checked; 
    } 

    function setCheckedValue(checkboxName,toBeChecked){ 
     $('input[name='+checkboxName+']').prop("checked", true).checkboxradio("refresh"); 
    } 
    </script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
      <h1>What kind/s of music do you listen to?</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <input type="checkbox" class="music" name="music" id="rock" value="rock" > 
     <label for="rock">Rock</label> 
     <input type="button" value="Get" onclick="alert(getCheckedValue())"> 
     <input type="button" value="Set" onclick="setCheckedValue('music','rock') "> 
    </div> 
</div> 
</body> 
</html>

Nguồn

2012-06-12 09:31:19

Thay vì sử dụng attr tôi sẽ khuyên bạn sử dụng prop.

Các ưu tiên cách qua trình duyệt tương thích để xác định xem một hộp kiểm được kiểm tra là để kiểm tra một giá trị "truthy" về sở hữu của phần tử sử dụng một trong các cách sau:

if (elem.checked) 
if ($(elem).prop("checked")) 
if ($(elem).is(":checked"))

Phương thức .prop() nên được sử dụng để đặt tắt và được kiểm tra thay vì phương thức .attr(). Phương thức .val() nên được sử dụng để nhận và thiết lập giá trị.

$("input").prop("disabled", false); 
$("input").prop("checked", true); 
$("input").val("someValue");

Nguồn

2012-05-03 04:43:27

thử

function setCheckedValue(toBeChecked){ 
    document.getElementById(toBeChecked).checked=true; 
    alert((document.getElementById(toBeChecked).checked)) 
    alert($('#'+toBeChecked).prop('checked')) 
}

Nguồn

2012-05-03 04:46:56

jquery-mobile gắn thêm các lớp học cho những thứ như vậy. Về cơ bản trong đó cặp một đầu vào/nhãn bạn có những điều sau đây:

<div class="ui-checkbox"> 
    <input type="checkbox" class="music" name="music" id="rock" value="rock"> 
    <label for="rock" data-corners="true" data-shadow="false" data-iconshadow="true" data- wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-checkbox-on ui-btn-up-c"> 

    <span class="ui-btn-inner ui-btn-corner-all"> 
     <span class="ui-btn-text">Rock</span> 
     <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span> 
    </span> 
    </label> 
</div>

Những gì bạn cần làm là tìm một cách để loại bỏ và thêm các lớp học để các nhãn và khoảng thẻ. Tôi đã làm điều này cho nhãn, nhưng không phải cho khoảng thời gian như tôi về cuối cùng để có được một số giấc ngủ.

function setCheckedValue(toBeChecked){ 
    document.getElementById(toBeChecked).checked="checked"; 
    $("label[for='rock']").addClass("ui-checkbox-off"); 
    $("label[for='rock']").addClass("ui-checkbox-on"); 
}

tôi đã vấp ngã trên:

$("#checkbox-label").checkboxradio("refresh");

Từ: http://forum.jquery.com/topic/what-is-the-most-effective-way-of-unchecking-a-checkbox

Không hoàn toàn cùng một câu hỏi, tôi biết nhưng ít có liên quan. Tôi không có cơ hội để finagle với nó và làm cho nó hoạt động ... tôi cũng không nhìn nhiều hơn vào nó để xem nếu nó thậm chí làm việc.

Tóm lại, thuộc tính đang được đặt thành "đã kiểm tra", tuy nhiên, các yếu tố cần phải được làm mới css để phù hợp với 'trạng thái' mới.

Tôi hy vọng điều này sẽ hữu ích!

Nguồn

2012-05-03 05:10:26 Chase

Cảm ơn tất cả các Một Vì chỉ có hỗ trợ , Bây giờ sau khi nhìn thấy tất cả các câu trả lời tôi đã đạt đến giải pháp của tôi Dưới đây là mã chức năng setCheckedValue (toBeChecked) { \t \t //document.getElementById(toBeChecked).checked="checked "; \t \t $ ("input [name = music]"). Prop ("checked", true); \t \t $ ("label [for = 'rock']").addClass ("ui-checkbox-on"); \t \t $ ("span"). AddClass ("ui-icon-checkbox-on"); \t} –

Tôi có bất kỳ cách nào để cung cấp cho phong cách trong Span ... Như tôi đã đưa ra phong cách span cho hộp kiểm, phải mất cho tất cả các yếu tố span –

Sumit, tôi sẽ xem xét thêm một chút sau này khi tôi về nhà từ làm việc và cho bạn biết nếu tôi tìm thấy bất cứ điều gì. Tôi đã làm lộn xộn xung quanh một thời gian ngắn đêm qua cố gắng để có được nó để làm việc, nhưng đã không thành công. – Chase

Checked Checkbox không được cập nhật trong giao diện người dùng

Trả lời

Các vấn đề liên quan