2

編集：教授に連絡しました。フォーム（教授のウェブサイトなど）でのアクションでは許可されていないため、実際にはこの割り当てでjQueryを使用することは[想定]されていません。とても迅速かつ有益に返信したすべての人にTyvm。したがって、私は純粋なネイティブJSソルンに興味があります。これらの問題を解決するには：

ユーザーがDOM指向の形式で[はい]または[いいえ]ラジオボタンをクリックしたかどうかに基づいて「オンまたはオフ」を切り替えるチェックボックスのグループを取得します。（I：ラジオボタン、II：チェックボックス）のHTMLは次のとおりです。

I:)ラジオボタン

<label> Subscribe to our Mailing List? </label>
   <input type="radio" name="raydeo" id="rad1" value="Yes" onclick="subscribe()"></input> 
        <label>Yes</label>
   <input type="radio" name="raydeo" id="rad2" value="No" onclick="subscribe()"></input> 
        <label>No</label>

II。）チェックボックス

<fieldset>
    <legend>Mailing List Subscriptions</legend>
    <br />
    <input type="checkbox" name="mailinglist" value="Corporate Press Release Emails" id="cor"></input><label> Corporate Press Release Emails</label>
    <br />
    <input type="checkbox" name="mailinglist" value="Upgrade Software Advertising List" id="sof"></input><label> Upgrade Software Advertising List</label>
    <br />
    <input type="checkbox" name="mailinglist" value="List given to spammers after buyout" id="lspa"></input><label> List given to spammers after buyout</label>
    <br />
    <input type="checkbox" name="mailinglist" value="The only non-cynical list" id="cyn"></input><label> The only non-cynical list</label>
    <br />
    <input type="checkbox" name="mailinglist" value="List to sell to spammers" id="tos"></input><label> List to sell to spammers</label>
    <br />
    <input type="checkbox" name="mailinglist" value="Spam List" id="spal"></input><label> Spam List</label>
    <br />
        </fieldset>

ラジオボタンクリックに基づくチェックボックスの設定などの投稿で提供されている理論的根拠を使用します。これはまだjQueryを使用しており、これまでに行った最善の試みは次のとおりです。

<script>
function subscribe(){
  //var yesPlease = document.getElementById("rad1");
  //var noThx = document.getElementById("rad2");
   var arr = new Array["cor", "sof", "lspa", "cyn", "tos", "spal"];
     //var hold = document.getElementById(arr[i]);
     //if(hold.getAttribute(arr[i]).checked = true && arr[i] >= 1){
     //document.getElementById("cor").innerHTML=hold.getAttribute("checked");
    var hold = document.getElementsByName("mailinglist")[0];

    for(var i = 0; i < arr.length; i++)
    {
      if(document.getElementById("rad1").checked==true)
      {
          hold.getAttribute(arr[i]).checked == true;
      }
        else if(document.getElementById("rad2").checked==true)
        {
            hold.getAttribute(arr[i]).checked == false;
        }
    }
}
</script>

ドキュメントを読み込んでどちらかをクリックしても、何も起こりません。役立つ場合は、関連するセクションのスクリーンショットを次に示します。ありがとうございます。

メーリングリストのサブスクリプション

4

4 に答える 4

3

インライン JavaScript コードを削除し、js ファイル自体にイベントを添付してみてください。

これを試して

$('#rad1,#rad2').on('click', function() {
        $('fieldset input[type="checkbox"]')
                               .prop('checked',this.value === 'Yes');
    }
});

フィドルをチェック

于 2012-12-05T07:36:21.933 に答える
2

ラジオ ボタンがクリックされたときのアクション ハンドラが必要です。要素属性「checked」がクリック時に正しく更新されるようにします。

以下のコードは、すべての入力タイプのラジオにクリック ハンドラーを含めるように編集したものです。

$(document).ready(function(){
function subscribe() {
    $('input[type="radio"]').click(function(){
        var yesPlease = document.getElementById("rad1");
        var noThx = document.getElementById("rad2");
        if(yesPlease.checked == true){
            //check all boxes
            $("#cor").prop("checked", true);
            $("#sof").prop("checked", true);
            $("#lspa").prop("checked", true);
            $("#cyn").prop("checked", true);
            $("#tos").prop("checked", true);
            $("#spal").prop("checked", true);
        }
        else if(noThx.checked == true) {
            //uncheck all boxes
            $("#cor").prop("checked", false);
            $("#sof").prop("checked", false);
            $("#lspa").prop("checked", false);
            $("#cyn").prop("checked", false);
            $("#tos").prop("checked", false);
            $("#spal").prop("checked", false);
        }
    });
}
subscribe();
​});​

JSFiddle: http://jsfiddle.net/MSZtx/

于 2012-12-05T07:43:41.637 に答える
1

あなたのコードは完璧に機能しています:- ここを参照してください:- http://jsfiddle.net/LeWbR/2/
私が想像できる唯一の問題

  1. ページに jquery を含めましたか。
  2. JS 関数を配置した場所。

JSfiddle の左側のドロップダウンを参照してください。値を no wrap(body) から onDomReady または onLoad に変更すると機能しません。

function subscribe() {
    var yesPlease = document.getElementById("rad1");
    var noThx = document.getElementById("rad2");
    if(yesPlease.checked){
    //check all boxes
    $("#cor").prop("checked", true);
    $("#sof").prop("checked", true);
    $("#lspa").prop("checked", true);
    $("#cyn").prop("checked", true);
    $("#tos").prop("checked", true);
    $("#spal").prop("checked", true);
}
else if(noThx.checked) {
    //uncheck all boxes
    $("#cor").prop("checked", false);
    $("#sof").prop("checked", false);
    $("#lspa").prop("checked", false);
    $("#cyn").prop("checked", false);
    $("#tos").prop("checked", false);
    $("#spal").prop("checked", false);
}
}

な

于 2012-12-05T08:06:25.717 に答える
1

この単純なコードは問題を解決します。

HEADセクションの JavaScript :

$(document).ready(function(){ 

    $(".radio-button").click(function(){

        if($(this).val() == "No")
            $(".checkbox-list input").attr("disabled", true);
        else
            $(".checkbox-list input").attr("disabled", false);

    });

})

また、上記のコードの前に jquery ライブラリ CDN ソースを追加します。

BODYセクションのマークアップ:

<label> Subscribe to our Mailing List? </label>
<input type="radio" name="raydeo" id="rad1" value="Yes" onclick="subscribe()" class="radio-button"></input><label> Yes</label>
<input type="radio" name="raydeo" id="rad2" value="No" onclick="subscribe()" class="radio-button"></input><label> No</label>

<fieldset class="checkbox-list">
    <legend>Mailing List Subscriptions</legend>
    <br />
    <input type="checkbox" name="mailinglist" value="Corporate Press Release Emails" id="cor"></input><label> Corporate Press Release Emails</label>
    <br />
    <input type="checkbox" name="mailinglist" value="Upgrade Software Advertising List" id="sof"></input><label> Upgrade Software Advertising List</label>
    <br />
    <input type="checkbox" name="mailinglist" value="List given to spammers after buyout" id="lspa"></input><label> List given to spammers after buyout</label>
    <br />
    <input type="checkbox" name="mailinglist" value="The only non-cynical list" id="cyn"></input><label> The only non-cynical list</label>
    <br />
    <input type="checkbox" name="mailinglist" value="List to sell to spammers" id="tos"></input><label> List to sell to spammers</label>
    <br />
    <input type="checkbox" name="mailinglist" value="Spam List" id="spal"></input><label> Spam List</label>
    <br />
</fieldset>

同じタスクを実行する 2 番目のオプションもあります。

HEADセクションの JavaScript :

/* Solution - 2 */
function subscribe(ele)
{

    if(ele == "No")
            $(".checkbox-list input").attr("disabled", true);
    else
            $(".checkbox-list input").attr("disabled", false);


}

また、上記のコードの前に jquery ライブラリ CDN ソースを追加します。

body セクションのMARKUPの変更:

<label> Subscribe to our Mailing List? </label>
<input type="radio" name="raydeo" id="rad1" value="Yes" onclick="subscribe(this.value)" class="radio-button"></input><label> Yes</label>
<input type="radio" name="raydeo" id="rad2" value="No" onclick="subscribe(this.value)" class="radio-button"></input><label> No</label>
于 2012-12-05T10:52:29.857 に答える